Angular UI Bootstrap Pagination ng-model not updating

Question

I am trying to use a UI Bootstrap Pagination directive in my project, but for some strange reason the ng-model used for updating the current page is not working. The pagination is showing up correctly with the correct number of tabs and everything, but when I click on a different number, the ng-model variable is not getting updated. For the life of me, I can't figure out why not.

The code I am using is taken from the examples on the UI Bootstrap homepage:

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

The controller looks like this:

$scope.currentPage = 1;
$scope.totalItems = 160;

$scope.pageChanged = function() {
  console.log('Page changed to: ' + $scope.currentPage);
};

Here are the different required sources I am including:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>

The strangest thing is I have created a plnkr which replicates my code and it works! You can see here: http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

Can anybody think of any ideas that might be causing this not to work? I'm scratching my head here, and can't think of anything obvious I am doing wrong...

All help much apprecatiated!

Classic case of not using an object in ng-model. This is a golden rule in angular — charlietfl
– charlietfl, Commented Jan 13, 2016 at 19:42
stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model — charlietfl
– charlietfl, Commented Jan 13, 2016 at 20:16
did you change it to object? Nested scopes are why you can't use primitives for ng-model — charlietfl
– charlietfl, Commented Jan 13, 2016 at 20:35
did you look at link above I provided? Watch the video linked in first answer — charlietfl
– charlietfl, Commented Jan 13, 2016 at 20:51
Actually @charlietfl the angular-ui docs use $scope.currentPage github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/… — Fergus
– Fergus, Commented May 5, 2016 at 4:42

Kamlesh Kumar · Accepted Answer · 2017-11-24 05:46:51Z

28

I ran through the same problem and solved it by wrapping all Angular UI Bootstrap Pagination parameters into the object, like so:

JS

$scope.pagination = {
    currentPage: 1,
    maxSize: 21,
    totalItems: data.count
};

HTML

<uib-pagination
    total-items="pagination.totalItems" 
    ng-model="pagination.currentPage" 
    max-size="pagination.maxSize"
    boundary-link-numbers="true" 
    ng-change="pageChanged()"></uib-pagination>

edited Nov 24, 2017 at 5:46

Kamlesh Kumar

1,6802 gold badges21 silver badges31 bronze badges

answered Jul 18, 2016 at 13:03

Viktor

4,3364 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

halbano Over a year ago

Do you know precisely (or have a theory) why this happens sometimes with the binding?

jegadeesh Over a year ago

Weird. After including those properties in an object, it works.

Barani r · Accepted Answer · 2016-11-08 05:57:08Z

0

I also had same issue. Found that the bootstrap-tpls-0.10.0.js was causing this issue. Just replaced it with bootstrap-tpls-0.11.0.js to make it work.

Below is the library combination that works:

<script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>  
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

answered Nov 8, 2016 at 5:57

Barani r

2,3951 gold badge26 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap Pagination ng-model not updating

2 Answers 2

JS

HTML

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

JS

HTML

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related