title: unable to delete dynamically added form fields using angular js
body: <p>I am using AngularJS v1.5.8. </p>
  
  <p>In <strong>html</strong></p>
  
  <pre><code>&lt;div class="form-group row" data-ng-repeat="friend in friends track by $index"&gt;
              &lt;label class="col-xs-1 control-label"&gt;Friend &lt;/label&gt;
              &lt;div class="col-xs-2"&gt;
                  &lt;input type="text" class="form-control" required ng-model="friend.first_name"  placeholder="First Name" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2"&gt;
                  &lt;input type="text" class="form-control" required ng-model="friend.last_name"  placeholder="Last Name" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;input type="email" class="form-control" required ng-model="friend.email"  placeholder="Email" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2"&gt;
                  &lt;input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-1"&gt;
                  &lt;a href="#" ng-click="addMore($index)"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-1"&gt;
                  &lt;a href="#" ng-click="removeFriend($index)"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In <strong>controller</strong></p>
  
  <p>$scope.friends = [{first_name: "", last_name: "", email: "", phone: ""}];</p>
  
  <pre><code>$scope.addMore = function () {
      console.log('in add');
      $scope.friends.push({
          first_name: "",
          last_name: "",
          email: "",
          phone: ""
      });
  };
  
  $scope.removeFriend = function(index) {
      console.log("in remove: "+index);
      $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong....
  };
  </code></pre>
  
  <p>while I inspect the code I get <code>removeList($index)</code> instead I was hoping <code>removeList(1)</code> or <code>removeList(4)</code>.</p>
  
  <p>What possibly can be wrong?</p>
  
  <p>I have two questions 
  - why even if I am passing index correctly , it end up deleting last element
  - how data entered will be updated in angular...</p>
  
  <p>If you have some tutorial to follow please share the link</p>