Custom Pagination using Angular JS- Need to display div elements in first page which should get repeated on 2nd page clicked Next

Question

1. I have a paginated pane. I have an array of size 42. The first page shows 24 div elements and the second page shows the remaining 18 elements.

2. My questi

Answer 1

Using a function in the startFrom: filter, you are able to control the display of the last page in the data set. This keeps your result display size consistent and gives you the overlap of data you are requiring.

Updated fiddle: http://jsfiddle.net/zr9nd0rx/1/

<li ng-repeat="item in data | startFrom: startFromCalculator()| limitTo:pageSize">


$scope.startFromCalculator = function() {
   if ($scope.currentPage + 1 == Math.ceil($scope.data.length/$scope.pageSize)) {
       return $scope.data.length - $scope.pageSize;
   } else {        
       return $scope.currentPage*$scope.pageSize;
   }
}