javascript - How do submit dynamically generated form fields to processing page with angularjs? -

i working on lengthy form has section block of form fields dynamically added/removed. far have not been able find way make method work.

for example, if add 3 subcontractors , fill in input each, ngmodel holds value should. however, if remove 1 of fields ngmodel still holding input value. additionally, if remove 2nd field in series doesn't remove instance, reduces count instead of having field #1 , field #3 should, have field #1 , field #2.

the end result in of submit process page , have loop iterate through total # of added fields , insert them db.

i'm new angularjs i'm not sure method attempting best practice seems overly complex, open suggestions on how improve process well.

html

 <div ng-repeat="subcontractor in subcontractors">    <div class="well well-sm">subcontractor #{{subcontractor.id}}<span id="subcounter"></span>      <button type="button" ng-click="removesub()" class="close" aria-label="close"><span aria-hidden="true">&times;</span></button>    </div>    <div class="form-group">      <div class="col-md-6">        <label for="subname">subcontractor name</label>        <input type="text" class="form-control" id="subname" name="subname" placeholder="subcontractor" ng-model="formdata.subname['subname'+($index+1)]">      </div>      <button type="button" class="btn btn-info btn-sm pull-right" ng-show="showaddsub(subcontractor)" ng-click="addnewsub()">[+] add new sub</button>  </div> 

angularjs

$scope.addnewsub = function() {   var newitemno = $scope.subcontractors.length+1;   $scope.subcontractors.push({'id': +newitemno}); };  $scope.removesub = function() {   var newitemno = $scope.subcontractors.length-1;   $scope.subcontractors.splice($scope.subcontractors-1, 1); };  $scope.showaddsub = function(subcontractor) {   return subcontractor.id === $scope.subcontractors[$scope.subcontractors.length-1].id; };