Pagination using Angular is a breeze! Check out the examples below.
The selected page no: {{currentPage}}
Page: {{bigCurrentPage}} / {{numPages}}
Source HTML for the demo:
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="currentPage = 3">Set current page to: 3</button>
<hr>
<h4>Using a Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>
<h4>Limiting the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
// inside the controller $scope.totalItems = 64; $scope.currentPage = 4; $scope.maxSize = 5; $scope.bigTotalItems = 175; $scope.bigCurrentPage = 1;