AngularJS pagination - id counter start from 1 in new pages

Issue

I have added ui.bootstrap pagination, works great. but the contacts id number starts from the beggining in new pages. I want it to continue increment.

View (plnkr demo)

<tr ng-repeat="trainee in trainees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
    <td class="hidden-xs">{{$index+1}}</td>
    <td>{{trainee.name}}</td>
    <td>{{trainee.date | date:'d/M/yyyy'}}</td>
    <td>{{trainee.grade}}</td>
    <td>{{trainee.subject}}</td>
    <td width="180px"><a href="#edit-form"><button type="button" href="#edit-form" class="btn btn-info" ng-disabled="selectedRow !== $index" ng-click="editForm($index,trainee)">Edit</button></a>
        <button type="button" class="btn btn-warning" ng-disabled="selectedRow !== $index" data-toggle="modal" data-target="#myModal" ng-click="traineeDetails(trainee)">Details</button>
    </td>
</tr>

For example, first page:

id 1: name - rayu, id 2: name - glen
second page: id 1, instead of 3!

Solution

Try it like in this - demo fiddle. It would be much better to calculate this kind of output inside your controller. Also the search does work nicely on the whole object now by adding startFrom & limitTo filter.

<tbody>
  <tr ng-class="{'selected':$index == selectedRow}"
      ng-click="setClickedRow($index)"
      ng-repeat="trainee in trainees 
        | filter: search
        | startFrom:(currentPage-1)*itemsPerPage
        | limitTo:itemsPerPage">
    <td class="hidden-xs">{{$index+1 + (itemsPerPage * (currentPage-1))}}</td>
    <td>{{trainee.name}}</td>
    <td>{{trainee.date | date:'d/M/yyyy'}}</td>
    <td>{{trainee.grade}}</td>
    <td>{{trainee.subject}}</td>
    <td width="180px"><a href="#edit-form"><button type="button" href="#edit-form" class="btn btn-info" ng-disabled="selectedRow !== $index" ng-click="editForm($index,trainee)">Edit</button></a>
      <button type="button" class="btn btn-warning" ng-disabled="selectedRow !== $index" data-toggle="modal" data-target="#myModal" ng-click="traineeDetails(trainee)">Details</button>
    </td>
  </tr>
</tbody>

startFrom filter

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

Answered By - lin