non-working pagination directives

main.ctrl.js

        
        $scope.callbackX = function() {
            Restangular.all('residents').getList(params).then(function(res) {
                $scope.paging = res.paging;
                $scope.residents = res.data;
                $scope.isLoading = false;
            }, function() {
                $scope.isLoading = false;
            });
        }

        $scope.prePhaseCallbackX = function() {
            $scope.isLoading = true;
        }

main.template.html

<!-- snippet of the template -->
<!-- controller is main.ctrl -->
<div class="paging pull-right btn-group btn-group-sm" ss-pagination callback="callbackX" prePhaseCallback="prePhaseCallbackX">
    <button type="button" class="btn btn-default" ss-pagination-previous ng-disabled="residents.paging.previous === undefined"><i class="ion-chevron-left"></i></button>
    <span class="paging-info">
        <strong>
            <span ng-bind="residents.paging.start_count"></span> - <span ng-bind="residents.paging.end_count"></span>
        </strong>
        of
        <strong><span ng-bind="residents.paging.total"></span></strong>
    </span>
    <button type="button" class="btn btn-default" ss-pagination-next ng-disabled="residents.paging.next === undefined"><i class="ion-chevron-right"></i></button>
</div>

pagination-next.ctrl.js

+(function(angular, undefined) {
  function PaginationNextCtrl() {
    // view-model
    var vm = this;

    vm.goToNextPage = goToNextPage;

    /**
     * [goToNextPage description]
     * @return {[type]} [description]
     */
    function goToNextPage() {
      console.log('Nextg is called');
      vm.goToPage('next');
    }
  }

  angular
    .module('app')
    .controller(
      'PaginationNextCtrl',
      PaginationNextCtrl
    );
})(angular, _);

pagination-next.directive.js

+(function(angular, undefined) {
  function PaginationNextCtrl() {
    // view-model
    var vm = this;

    vm.goToNextPage = goToNextPage;

    /**
     * [goToNextPage description]
     * @return {[type]} [description]
     */
    function goToNextPage() {
      console.log('Nextg is called');
      vm.goToPage('next');
    }
  }

  angular
    .module('app')
    .controller(
      'PaginationNextCtrl',
      PaginationNextCtrl
    );
})(angular, _);

pagination-prev.ctrl.js

+(function(angular, _, undefined) {
  function PaginationPreviousCtrl() {
    // view-model
    var vm = this;

    vm.goToPreviousPage = goToPreviousPage;

    /**
     * [goToPreviousPage description]
     * @return {[type]} [description]
     */
    function goToPreviousPage() {
      vm.goToPage('previous');
    }
  }

  angular
    .module('app')
    .controller(
      'PaginationPreviousCtrl',
      PaginationPreviousCtrl
    );
})(angular, _);

pagination-prev.directive.js

+(function(angular, undefined) {
  function paginationPrevious() {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      require: '^ssPagination',
      template: getTemplate,
      controller: 'PaginationPreviousCtrl'
    };

    function getTemplate(element, attrs) {
      return [
        '<div ng-transclude ',
        'ng-click="goToPreviousPage()">',
        '</div>'
      ].join('');
    }
  }

  angular
    .module('app')
    .directive('ssPaginationPrevious', paginationPrevious);
})(angular);

pagination.ctrl.js

+(function(angular, _, undefined) {
  function PaginationCtrl() {
    // view-model
    var vm = this;

    vm.decodeQuery = decodeQuery;
    vm.getData = getData;
    vm.goToNextPage = goToPage;

    /**
     * [goToNextPage description]
     * @return {[type]} [description]
     */
    function goToPage(which) {
      console.log('gotoPage Called');
      // Call pre-phase callback
      if ( !_.isUndefined(vm.prePhaseCallback) ) {
        vm.prePhaseCallback();
      }

      vm.decodeQuery(which);
      vm.getData();
    }

    function getData() {
      var promise = vm.callback();

      // Call post-phase callback
      if ( !_.isUndefined(vm.postPhaseCallback) ) {
        vm.postPhaseCallback();
      }

      return promise;
    }

    function decodeQuery(query) {
      return decodeURIComponent(
        (query + '').replace(/\+/g, '%20')
      ) || '';
    }
  }

  angular
    .module('app')
    .controller(
      'PaginationCtrl',
      PaginationCtrl
    );
})(angular, _);

pagination.directive.js

+(function(angular, _) {
  function pagination() {
    // callback is called when the data is being fetched
    // prePhaseCallback, called before the data is fetched
    // postPhaseCallback, called after the data is fetched
    var scope = {
      callback: '&',
      prePhaseCallback: '&',
      postPhaseCallback: '&'
    };

    return {
      scope: scope,
      restrict: 'EA',
      transclude: true,
      template: getTemplate,
      controller: 'PaginationCtrl'
    };

    /**
     * Simply generates the template string
     * @return string
     */
    function getTemplate() {
      return [
        '<div ng-transclude>',
        '</div>'
      ].join('');
    }
  }

  angular
    .module('app')
    .directive('ssPagination', pagination);
})(angular);