angular material pagination

component.js

'use strict';

angular.module('myApp')
  .component('myComponent', {
      templateUrl: 'myComponent.html',
      controller: function ($scope) {
          
          var vm = this;

         
          //options for pagination
          vm.pagination = {
              curPage:0,
              pageSize:5
          };
    
          /**
           * 
           * number of pages for pagination
           * @returns {undefined} 
           */
          vm.numberOfPages = function(){
              return Math.ceil(vm.companyList.length / vm.pagination.pageSize);
          };
        
      }
  });

filter.js

    .filter('pagination', function(){
        return function(input, start){
            start = +start;
            return input.slice(start);
        };
    })
    .filter('range', function() {
        return function(val, range) {
            range = parseInt(range);
            for (var i=0; i<range; i++){
                val.push(i);
            }
            return val;
        };
    });

list.html

   <md-card  ng-repeat="company in $ctrl.companyList  | orderBy:'name' | pagination: $ctrl.pagination.curPage * $ctrl.pagination.pageSize| limitTo: $ctrl.pagination.pageSize">
    </md-card>


      
    <pagination ng-if="$ctrl.companyList.length > $ctrl.pagination.pageSize" current="$ctrl.pagination.curPage" pages="$ctrl.numberOfPages()"></pagination>

pagination.html

<div  class="custom-pagination" style="max-height: 87px;"layout="row" layout-align="center center" >
    <md-button class="md-fab md-primary"  ng-click="vm.back()"  ng-disabled="vm.currentPage<=1">
        <md-icon>chevron_left</md-icon>
    </md-button>   

        <md-input-container ng-if="pages > 5">
            <input aria-label="page number" ng-value="7"ng-change="vm.goToPage()"ng-model="vm.currentPage" type="text">
        </md-input-container>  
            <span  ng-if="pages > 5">OF</span>    
        <md-input-container ng-if="pages > 5" >
            <input aria-label="page last" ng-value="pages " type="text" disabled>
        </md-input-container>         


    <span ng-if="pages <= 5">   
        <md-menu> 
            <md-button aria-label="Open device menu" class="md-raised" ng-click="$mdOpenMenu($event)">
                {{vm.currentPage}}
            </md-button>

            <md-menu-content width="2">
                <md-menu-item ng-repeat="page in [] | range:pages ">
                    <md-button ng-click="vm.clickPage(page)">{{page+1}}</md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>        
    </span>

    <md-button ng-click="vm.next()"class="md-fab md-primary" ng-disabled="vm.currentPage >= pages">
        <md-icon>chevron_right</md-icon>
    </md-button>
</div>

pagination.js

(function(){
    'use strict';

    angular.module('myApp')
    .directive('pagination', function () {
        return {
            restrict: 'E',       
            scope: {
                current:'=',
                pages:'<'
            },                
            templateUrl: '../scripts/components/pagination.html',       
            controllerAs:'vm',
            controller:
              function($scope){
                  var vm = this;
                  vm.currentPage = $scope.current + 1; 

                 /**  
                   * 
                   * Click back button
                   * @return {undefined}
                   */
                  vm.back = function(){
                      $scope.current = $scope.current - 1;
                      vm.currentPage = $scope.current + 1;
                  };
                 /**  
                   * 
                   * Click back button
                   * @return {undefined}
                   */                  
                  vm.next = function(){
                      $scope.current = $scope.current + 1;
                      vm.currentPage = $scope.current +1; 
                  };

                  /**
                   * 
                   * for menu page 
                   * @param {number} page
                   * @return {undefined}
                   */
                  vm.clickPage = function(page){
                      $scope.current = page;
                      vm.currentPage = page+1;
                  };
                 
                  /**
                   * 
                   * Watcher for input page 
                   *
                   * @return {undefined}
                   */                 
                 
                  $scope.$watch(
                    function watchFoo(){
                        return(vm.currentPage);
                    },
                    function handlePageChange(newValue, oldValue){
                        console.log(newValue, oldValue);
                        if(newValue <= $scope.pages && newValue > 0){
                            $scope.current = newValue - 1;
                        }
                    }
                );

              }
            
        };
    });
})();