angularJS pagination not reading current page number

Question

I am trying to implement ui.bootstrap.pagination in my angularJS project, but I cannot seem to read the current page number, even though I have set ng-model. I am using angular-ui-bootstrap version 0.13.3.

The relevant part of my html:

    <pagination 
      data-ng-model="currentPage" 
      data-ng-change = "paginate()"
      data-total-items="repositories.total_count" 
      data-items-per-page="numPerPage" 
      data-max-size="maxSize" 
      data-boundary-links="true" >
    </pagination>

And my code:

angular.module('myApp.repositories')
.controller('RepositoryController', ['$scope', function($scope) {
  $scope.repositories = {};
  $scope.currentPage = 1;
  $scope.numPerPage = 30; // Number of items per page, set by Github API
  $scope.maxSize = 10; // Number of pages to show in pagination

  $scope.paginate = function() {    
    $http.get('https://api.github.com/search/repositories/', { 
      params: {
        q: 'twitter',
        page: $scope.currentPage
      }
    })
    .then(function(response){
        if(response.data){
            $scope.repositories = response.data;
        }
    });
  };
}]);

The pagination shows as expected and I can use it without it throwing errors, but in my paginate() function $scope.currentPage always reads 1.

I could be missing or overlooking something very basic, but I cannot seem to figure out why it isn't working.

Victor · Accepted Answer · 2015-08-12T11:58:09.127

Always have a dot in your model. Try this:

<pagination 
  data-ng-model="vm.currentPage"

...

  $scope.vm = {currentPage: 1};

To prevent this kind of problem, use controllerAs and avoid using the $scope as a model.

See this guide: https://github.com/johnpapa/angular-styleguide#controllers

The reason this is happening is because some directive is creating a scope in that element, and because of the way scopes are related (inheritance), your property ends up being shadowed, so the one on the child is different from the one on the parent.

It's quite annoying and complicated, which is why the best way to deal with this is not at all. Don't put stuff in your $scope apart from a reference to the actual model (for example, a controller instance, as facilitated by the controllerAs mechanism)

score 0 · Answer 2 · answered Feb 16 '16 at 16:40

I'm a few months late to this but, I want to make sure future readers of this question aren't confused. Using $scope is perfectly valid and in fact a pretty good way to get started with AngularJS. "Controller As" syntax is optional.

The solution here is pretty simple: Pass the selected page number into the 'Paginate' function. Then use that value to set $scope.currentPage.

 angular.module('myApp.repositories')
 .controller('RepositoryController', ['$scope', function($scope) {
 $scope.repositories = {};
 $scope.currentPage = 1;
 $scope.numPerPage = 30; // Number of items per page, set by Github API
 $scope.maxSize = 10; // Number of pages to show in pagination

 $scope.paginate = function(pageNumber) {  
   $scope.currentPage = pageNumber;
  $http.get('https://api.github.com/search/repositories/', { 
  params: {
    q: 'twitter',
    page: $scope.currentPage
  }
  })
  .then(function(response){
    if(response.data){
        $scope.repositories = response.data;
    }
  });
};
}]);

angularJS pagination not reading current page number

2 Answers2