Angularjs Pagination Index Issue?

Issue

Here i am trying to change index on paging ,The problem is index was showing same for every page in paging so i want to be change it usually . Here i have plunker link plunker

<li class="" ng-repeat="datalist in datalists | pagination: curPage * pageSize | limitTo: pageSize">
     <div>
       {{$index+1}}
       <span>{{ datalist.name }} </span>
       <span>
         {{ datalist.age }}
         </span>
         <span>{{ datalist.designation }}</span>
         </div> 
 </li>



<div class="pagination pagination-centered" ng-show="datalists.length">
<ul class="pagination-controle pagination">
 <li>
  <button type="button" class="btn btn-primary" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1"> &lt; PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button" class="btn btn-primary"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT &gt;</button>
 </li>
</ul>
</div>

Here index should be same for every page but it was showing fresh numbers for second page

.js file

 $scope.curPage = 0;
 $scope.pageSize = 3;
 $scope.numberOfPages = function() {
                return Math.ceil($scope.datalists.length / $scope.pageSize);
            };

angular.module('sampleapp').filter('pagination', function()
{
 return function(input, start)
 {
  start = +start;
  return input.slice(start);
 };
});

Solution

That's because $index just keeps track of the repeated items index after any filters have been applied.

Try changing {{$index+1}} to {{$index + 1 + (curPage * pageSize)}} as a workaround.

Updated plunkr

Answered By - Robin-Hoodie