5 - Use Pagination

Previous - Code Diff

Reset the workspace to step 5:

git checkout -f step-5


The Document Collection resource described in step 1 supports pagination of the documents list through the _offset and _max parameters:


In this step the app's document list will be extended with pagination using the above parameters and UI Bootstrap's pagination directive.

Code Changes


A dependency to Angular UI Bootstrap is added to the app.


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.js"></script>


var contentRestApp = angular.module('contentRestApp', [ 'ngRoute', 'ngResource',
    'ngSanitize', 'ui.bootstrap' ]);


The DocumentsService is extended with offset and max parameters to enable pagination.


contentRestApp.factory('DocumentsService', function($resource, apiPrefix) {
  return {
    getList : function(offset, max, query) {
      return $resource(apiPrefix + 'documents/', {
        _offset : offset,
        _max : max,
        _query : query
    getDocumentById : function(uuid) {
      return $resource(apiPrefix + 'documents/' + uuid).get();


The DocumentsController is extended with some management of the various pagination parameters, as well as a pageChanged function to update the list when a different page is selected in the page navigation.


  if (!$routeParams.uuid) {

    $scope.currentPage = 1;
    $scope.itemsPerPage = 6;
    $scope.query = '';

    $scope.update = function($scope) {
      $scope.offset = ($scope.currentPage - 1) * $scope.itemsPerPage;
          .getList($scope.offset, $scope.itemsPerPage, $scope.query).$promise
          .then(function(response) {
            $scope.documents = response;
            $scope.totalItems = $scope.documents['total'];


    $scope.pageChanged = function() {

    $scope.search = function() {



A page navigation is added to the documents-list view using UI Bootstrap's uib-pagination directive, bound to the various pagination parameters and the pageChanged function.


<uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()"></uib-pagination>


  • The itemsPerPage parameter is hardcoded in the app. Can you make it configurable through a dropdown?


In this step the app's document list view was extended with paging. This concludes the tutorial. If you have any questions or suggestions please use the forum!

Previous - Code Diff

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?

    We rely on cookies

    to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

    Manage cookies
    Accept & close

    Cookies preferences

    Accept & close