javascript - Order by table but the index doesn't follow -

i have table of json data, can sort various columns. when sort columns , click on button "delete" removes wrong one, $index isn't updated , don't know how fix it.

js code :

  $scope.friends =       [{name:'john', phone:'555-1212', age:10},        {name:'mary', phone:'555-9876', age:19},        {name:'mike', phone:'555-4321', age:21},        {name:'adam', phone:'555-5678', age:35},        {name:'julie', phone:'555-8765', age:29}];   $scope.predicate = 'age';   $scope.reverse = false;   $scope.order = function(predicate) {      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;      $scope.predicate = predicate;   };   $scope.delete = function (friend, index) {         $scope.friends.splice(index, 1);   }; 

html code :

 <table class="friend">     <tr>       <th>         <a href="" ng-click="order('name')">name</a>         <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>       </th>       <th>         <a href="" ng-click="order('phone')">phone number</a>         <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>       </th>       <th>         <a href="" ng-click="order('age')">age</a>         <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>       </th>     </tr>     <tr ng-repeat="friend in friends | orderby:predicate:reverse">       <td>{{friend.name}}</td>       <td>{{friend.phone}}</td>       <td>{{friend.age}}</td>       <td><button ng-click="delete(friend, $index)">delete</button></td>     </tr>   </table> 

plunker link :

http://plnkr.co/edit/ifirqisv3qu21pftmjdc?p=preview

just updated function in plunker.

till have object, don't use $index. use object instead

    $scope.delete = function (friend) {         $scope.friends.splice($scope.friends.indexof(friend), 1);     }; 

this work.