Tom O'Brien Tom O'Brien - 1 year ago 298
AngularJS Question

Angular UI Bootstrap Pagination ng-model not updating

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"

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="//" />
<script src=""></script>
<script src="//"></script>

The strangest thing is I have created a plnkr which replicates my code and it works! You can see here:

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!

Answer Source

I ran throught the same problem and solved it by wraping all Angular UI Bootstrap Pagination paremeters into the object, like so:


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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download