pagination.js

(function () {
  'use strict';

  /**
   * @ngdoc directive
   * @name app.directive:pagination
   * @description
   * # pagination
   */

  var template =
    '<div class="mui-col-xs-12 mui-col-md-6 labs-label">' +
    '    Total: <strong ng-bind="totalItems"></strong> ' +
    '    Página: <strong ng-bind="currPage"></strong> de ' +
    '    <strong ng-if="totalPages" ng-bind="totalPages"></strong>' +
    '    <strong ng-if="!totalPages" ng-bind="total"></strong>' +
    '</div>' +
    '<div class="mui-col-xs-12 mui-col-md-6 mui--text-right">' +
    '    <button class="mui-btn mui-btn--small mui-btn--primary mui-btn--flat"' +
    '            ng-click="paginate(previous, listFn)" ' +
    '            ng-disabled="!previous">&leftarrow; Anterior' +
    '    </button>' +
    '    <button class="mui-btn mui-btn--small mui-btn--primary mui-btn--flat"' +
    '            ng-click="paginate(next, listFn)" ' +
    '            ng-disabled="!next">Proximo &rightarrow;</button>' +
    '</div>';

  function Pagination(EnvService, CommonService) {
    return {
      template: template,
      restrict: 'E',
      scope: {
        listResource: '=',
        listFn: '='
      },
      link: function ($scope, $element, attrs) {
        var baseUrl = EnvService.apiUrl + $scope.listResource;

        $scope.paginate = function (url, listFn) {
          var data = listFn(url);
          data.then(function(resp) {
            $scope.totalItems = resp.count;
            $scope.next = resp.next;
            $scope.previous = resp.previous;
            var total = Math.ceil(resp.count / resp.results.length);
            if (!$scope.totalPages) {
              $scope.totalPages = total;
            }
            if (!$scope.previous) {
              $scope.currPage = 1;
            }
          });
          var numPage = CommonService.getParameterByName(url, 'page');
          $scope.currPage = parseInt(numPage);
        };
        if ($scope.listResource) {
          $scope.paginate(baseUrl, $scope.listFn);
        }
      }
    };
  }

  angular
    .module('app')
    .directive('pagination', Pagination);

  Pagination.$inject = ['EnvService', 'CommonService'];
})();

products.html

<div class="mui-row">
    <div class="mui-col-md-12">
        <h2 class="labs-h2-title">Produtos (SKU)</h2>
    </div>
</div>
<div class="mui-row">
    <!-- Message -->
    <div ng-if="self.message" class="mui-col-xs-12 mui-col-md-12 labs-label mui--text-danger"
         ng-bind="self.message" style="background: #f5f5f5"></div>
    <pagination list-resource="self.productService.urlSkuSet"
                list-fn="self.listProduct">
    </pagination>
</div>
<div class="mui-row" style="overflow-x: auto">
    <div class="mui-col-md-12">
        <table class="mui-table" ng-init="self.init()">
            <thead>
            <tr>
                <th>Imagem</th>
                <th>ID Produto</th>
                <th>Nome Produto</th>
                <th>ID Sku</th>
                <th>Nome Sku</th>
                <th>Ean Sku</th>
                <th>Preço</th>
                <th>Estoque</th>
                <th>Ultima atualização</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="product in self.products"
                ng-init="imageUrl = self.apiHost + product.main_image.url">
                <td>
                    <a ng-href="#/sku/{{ product.id }}" ng-if="product.main_image">
                        <img ng-src="{{ imageUrl }}" alt="{{ product.sku_name_complete }}"
                             title="{{ product.sku_name_complete }}" height="40">
                    </a>
                </td>
                <td ng-bind="product.product.product_id"></td>
                <td>
                    <a ng-href="#/sku/{{ product.id }}" ng-bind="product.product.name"></a>
                </td>
                <td ng-bind="product.sku"></td>
                <td>
                    <a ng-href="#/sku/{{ product.id }}" ng-bind="product.sku_name"></a>
                </td>
                <td ng-bind="product.ean"></td>
                <td>
                    <span>de</span> <strong ng-bind="product.list_price|currency:'R$ '"></strong><br>
                    <span>por</span> <strong ng-bind="product.price|currency:'R$ '"></strong>
                </td>
                <td ng-bind="product.stock"></td>
                <td ng-bind="product.modified|date:'medium'"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="mui-row">
    <pagination list-resource="'sku-set/'"
                list-fn="self.listProduct">
    </pagination>
</div>

products.js

(function () {
  'use strict';

  /**
   * @ngdoc function
   * @name app.controller:ProductsCtrl
   * @description
   * # ProductsCtrl
   * Controller of the app
   */

  function Products(ProductService,
                    LoadingService,
                    EnvService) {

    var self = this;
    self.message = null;
    self.apiHost = EnvService.apiHost;
    self.productService = ProductService;

    self.listProduct = function (page) {
      LoadingService.startLoading();
      return self.productService.skuSet(page).then(
        function (resp) {
          LoadingService.stopLoading();
          self.products = resp.results;
          return resp;
        }).catch(
        function (data) {
          LoadingService.stopLoading();
          self.message = 'Ops.: Error';
          console.log(data);
        });
    };
    self.listProduct();
  }

  angular
    .module('app')
    .controller('ProductsCtrl', Products);

  Products.$inject = [
    'ProductService',
    'LoadingService',
    'EnvService'
  ];

})();