Rendering issue using Ng-repeat, track by and limitto together - angularjs

Question

In my project, i am using ng-repeat with limitto filter and track by $index
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
<button ng-disabled="currentPage >= cil.cilChemicals.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
<div ng-repeat="chemical in Chemicals | startFrom: currentPage * pageSize | limitTo:pageSize track by $index">
<span ng-init="initDetails(chemical)"> {{chemical.details}} </span>
</div>
Controller code :
$scope.currentPage = 0;
$scope.pageSize = 50;
Module.filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
});
With this setup, initDetails(chemical) is called for all chemicals during first time ng-repeat rendering thus not called for each page which is rendered perfectly for the first time but when we repeat the page then ng-repeat starts re rendering from in between the array.
Please suggest why it starts from in between and when we use trackby chemical.chemicalIdthen angular js calls initDetails(chemical)for each page.

Answer 1

The way you have ng-init, runs in each iteration.
Except (enters track by):
when you use trackby $index the first element has always the $index 0 regardless of page number,
so angular doesn't re-render the html
but when you change the trackby to chemical.chemicalIdthen angular re-renders the html in evey iteration.
Actually angular will re-render only the items that have diff in the track by expression, either it is an index or id, than the previous items.
Also I agree with #ste2425's comment. that is not the intended use of ng-init
just a note:
LimitTo filter accepts 2 parameters, limit and begin,
limit is the page size, and begin is the index to start counting, so there is no need to create a custom filter for that.
You can essentially do this:
<button ng-disabled="currentPage == 0" ng-click="previousPage()">Previous</button>
<button ng-disabled="currentPage >= cil.cilChemicals.length/pageSize - 1" ng-click="nextPage()">Next</button>
<div ng-repeat="chemical in Chemicals | limitTo:pageSize:startFrom track by $index">
<span ng-init="initDetails(chemical)"> {{chemical.details}} </span>
</div>
And your controller
$scope.currentPage = 0;
$scope.pageSize = 50;
scope.startFrom = 0
$scope.nextPage = function() {
$scope.currentPage++;
$scope.startFrom = $scope.currentPage * $scope.pageSize;
};
$scope.previousPage = function() {
$scope.currentPage--;
$scope.startFrom = $scope.currentPage * $scope.pageSize;
};