html - How to add radio buttons and input fields using angularJS -

i trying add both input fields , corresponding radio buttons project using angularjs. means when click add, create 1 input field , 3 corresponding radio buttons together, below picture. able add input fields when click add. having trouble in creating radio buttons when click add iput field's placeholder should display input 1 , when click add again should display input 2 that. can me on it. following code.

html portion:

<table class="table"> <tr class="tr_class">     <td></td>     <td></td>     <td align="center"><b>functional check </b></td>     <td align="center"><b>xxissue</b></td>     <td align="center"><b>yy risk</b></td> </tr>  <tr class="tr_class">     <td class="td_class"><div class="input-group">         <span class="input-group-addon">input 1</span>         <input type="text" class="form-control" placeholder="input 1">     </div> <br/></td>     <td> </td>     <td align="center"><input type="radio" name="a1"></td>     <td align="center"><input type="radio" name="a1"></td>     <td align="center"><input type="radio" name="a1"></td> </tr> <tr>     <td><div class="input-group">         <span class="input-group-addon">check2</span>         <input type="text" class="form-control" placeholder="input 2">     </div> <br/></td>     <td></td>     <td align="center"><input type="radio" name="a2"></td>     <td align="center"><input type="radio" name="a2" ></td>     <td align="center"><input type="radio" name="a2" ></td> </tr> <tr>     <td><div class="input-group">         <span class="input-group-addon">input 3</span>         <input type="text" class="form-control" placeholder="input 3">     </div> <br/></td>     <td></td>     <td align="center"><input type="radio" name="a3"></td>     <td align="center"><input type="radio" name="a3"></td>     <td align="center"><input type="radio" name="a3"></td> </tr>  <br><br>  <tr>      <td><div ng-controller="alertdemoctrl">         <input type="text" class="form-control" placeholder="input 3" ng-repeat="alert in alerts"                type="{{success.type}}" close="closealert($index)">{{success.msg}}<br></input>         <button type="button" class='btn btn-info' ng-click="addalert()">+add input</button>         <button type="reset" class="btn btn-danger">reset</button>     </div> <br><br><br></td></tr> 

and angularjs part:

{{ ngapp }}.controller('alertdemoctrl', function ($scope) {   $scope.alerts = [   ];    $scope.addalert = function() {     $scope.alerts.push({msg: 'another alert!'});   };    $scope.closealert = function(index) {     $scope.alerts.splice(index, 1);   }; }); 

refer below attached plunker, have derived answer on how modify dom in order add / remove elements current view.

even though elaborate how add elements, removal process same. remove required element element list.

this how add radio buttons dynamically.

<td ng-repeat="answer in question.answerslist track $index">   <input type="radio" name="{{$parent.$index}}" ng-value="1" ng-model="answer.is_correct"> </td>  $scope.addrow = function() {   $scope.questionlist.push({         "question_num": $scope.questionlist.length+1,         "answerslist": [             {                 "is_correct": "0",                 "answer_text": "answer 1",                 "feedback": "feedback 1"             },             {                 "is_correct": "0",                 "answer_text": "answer 2",                 "feedback": "feedback 2"             },             {                 "is_correct": "1",                 "answer_text": "answer 3",                 "feedback": "feedback 3"             }         ],         "question_text": "sample question" + ($scope.questionlist.length+1)     }); }