How to change the index of the objects while sorting table

Question

Can someone suggest me how to use angular filter for sorting the table by any column name, the sorting is working but the array index is not updating.

Thank you in advance

Please find the Pen

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$rootScope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;
 
  $rootScope.data = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    },{
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    },{
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };
   $scope.func=function(i){
    console.log( $rootScope.data.employees[i]);
    debugger;
  }
});

section {
  width: 400px;
  margin: 10px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort" class="glyphicon glyphicon-triangle-top"></span><span class="	glyphicon glyphicon-triangle-bottom" ng-show="reverseSort"></span></span>
          </a>
        </th><th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
        <td  ng-click="func($index)" ><span class="glyphicon glyphicon-pencil"></span>edit</td>
      </tr>
    </tbody>
  </table>
</section>

Answer 1

Having run the codepen/snippet I can see that clicking on edit doesn't log the appropriate row's employee.

You'll have to pass the employee to your handler rather than the index.

If you really need the index you can get the index using indexOf but using the index will just get you a reference to the same object so employee $rootScope.data.employees[i] are for all intents and purposes identical.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$rootScope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;
 
  $rootScope.data = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    },{
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    },{
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };
   $scope.func=function(employee){
    console.log(employee);
    
    // if you absolutley need the index then use indexOf
    var i = $rootScope.data.employees.indexOf(employee);
  }
});

section {
  width: 400px;
  margin: 10px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort" class="glyphicon glyphicon-triangle-top"></span><span class="	glyphicon glyphicon-triangle-bottom" ng-show="reverseSort"></span></span>
          </a>
        </th><th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
        <td  ng-click="func(emp)" ><span class="glyphicon glyphicon-pencil"></span>edit</td>
      </tr>
    </tbody>
  </table>
</section>