Pagination with angular-ui-bootstrap

The dependencies are the key, and the order they are loaded in is very important.

by Michael Perrenoud

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="app">
    <div ng-controller="ctrl">
         <h4>Default</h4>

        <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="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></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="setPage(3)">Set current page to: 3</button>
        <hr />
         <h4>Pager</h4>

        <pager total-items="totalItems" ng-model="currentPage"></pager>
        <hr />
         <h4>Limit 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>

    </div>
</div>

JavaScript

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ctrl', function ($scope, $log) {
    $scope.totalItems = 64;
    $scope.currentPage = 4;

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function () {
        $log.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.maxSize = 5;
    $scope.bigTotalItems = 175;
    $scope.bigCurrentPage = 1;
});