源自stackOverFlow

service

var rapid = angular.module('rapid');
rapid.service('pagerOptions',function () {
 'use strict';
    return {
        newOptions: function () {
            return {
                totalItems: 0,itemsPerPage: 50,page: 1,sortBy: '',isASC: true,filters: null,sortOptions: {
                    by: '',sort: function (sortBy) {
                        if (sortBy === this.parent.sortBy) {
                            this.parent.isASC = !this.parent.isASC;
                        } else {
                            this.parent.sortBy = sortBy;
                            this.parent.isASC = true;
                        }

                        this.parent.resetPage();
                        if (typeof this.parent.onPageChange === "function")
                            this.parent.onPageChange();
                    }
                },resetPage: function () {
                    this.page = 1;
                },goToPage: function (page) {
                    this.page = page;
                    if (typeof this.onPageChange === "function")
                        this.onPageChange();
                },init: function () {
                    this.sortOptions.parent = this; // it allows the Methods object to know who its Parent is
                    delete this.init; // if you don't need the Init method anymore after the you instanced the object you can remove it
                    return this; // it gives back the object itself to instance it
                }
            }.init();
        }
    };
})

directive

rapid.directive('footerPager',function () {
 return {
        restrict: 'E',transclude: true,template:
            '<div class="col-xs-9 text-right" ng-cloak>\
                <span ng-if="options.totalItems > options.itemsPerPage">\
                    <pagination \
                        ng-model="options.page" \
                        total-items="options.totalItems" \
                        items-per-page="options.itemsPerPage" \
                        ng-change="options.goToPage(options.page)" \
                        max-size="5" rotate="false" boundary-links="true" \
                        prevIoUs-text="&lsaquo;" next-text="&rsaquo;" \
                        first-text="&laquo;" last-text="&raquo;" \
                        class="pagination-sm">\
                    </pagination>\
                </span>\
            </div>\,scope: {
            options: '='
        }
    }
});

html

<footer-pager options="pagingOptions" id="footer"/>

controller

rapid.controller('HomeListController',['$scope','adminSvc','pagerOptions',function auditLogCtrl($scope,adminSvc,pagerOptions) {       
    $scope.pagingOptions = pagerOptions.newOptions();
    $scope.pagingOptions.sortBy = "CreatedDate";
    $scope.pagingOptions.itemsPerPage = 10;
    $scope.pagingOptions.onPageChange = loadData; //loadData is a method load the data to the page.
    var numberOfSearchPerfomed = 0;
    $scope.data= {};

    function loadData() {
        $scope.pagingOptions.filters = selectedFilters;
        service.getData(vm.pagingOptions) //Method will fetch data from db and show in the view based on pagingOptions.
            .success(function (result) {
                $scope.data= result.Data;
                $scope.pagingOptions.totalItems = result.TotalCount; // TotalCount represents the total number of records not page wise.
                $scope.enableResetButton = numberOfSearchPerfomed >= 1;
            });
    }

    loadData();
}])