<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" page="currentPage"></pagination>
<pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
<hr />
<h4>Pager</h4>
<pager total-items="totalItems" page="currentPage"></pager>
<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function ($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
};