Pagination in Angular UI Bootstrap throwing "Error: [$compile:nonassign]"

Question

I'm using a fairly simple implementation of Angular Bootstrap UI's pagination directive, yet I keep getting an error I cannot figure out. Here's the relevant snippets:

<ul>
  <li ng-repeat="todo in filteredIdeas">
    {{todo}}
  </li>
</ul>
<pagination ng-model="currentPage" total-items="totalIdeas"></pagination>

Here are the relevant portions of my $scope in the controller:

// Set watch on pagination numbers
$scope.$watch('currentPage + numPerPage', function() {

  var begin = (($scope.currentPage - 1) * $scope.numPerPage);
  var end = begin + $scope.numPerPage;

  $scope.filteredIdeas = $scope.ideasData.slice(begin, end);

});


// Data
$scope.ideasData = [];

for (var i = 0; i < 100; i++) {
  $scope.ideasData.push('To do ' + i);
}

$scope.filteredIdeas = [];
$scope.currentPage = 1;
$scope.numPerPage = 10;
$scope.totalIdeas = $scope.ideasData.length;

The pagination sets itself up correctly, but here's the error I receive when trying to click on the next page (or any page for that matter):

Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!

If I understand correctly, this is indicating that I'm using something improperly for two-way binding? Was able to replicate the bug in this Plunkr: http://plnkr.co/edit/uyWQXPqjLiE4qmQLHkFy

Anyone have any thoughts on what I'm doing wrong?

Heres your plunkr forked: plnkr.co/edit/BNgdbXD5YVwPKGhuIYcN?p=preview — aet
– aet, Commented May 2, 2014 at 2:08
I like your $watch, but imo this is better: plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview — Nuno Silva
– Nuno Silva, Commented May 9, 2014 at 22:13

David Salamon · Accepted Answer · 2016-04-24 12:00:22Z

66

The ability to use ng-model was introduced in ui-bootstrap-tpls-0.11.0.js, as explained in the changelog:

Both pagination and pager are now integrated with ngModelController.
* page is replaced with ng-model
* on-select-page is removed since ng-change can now be used
Before:
<pagination page="current" on-select-page="changed(page)" ...></pagination> After:
<pagination ng-model="current" ng-change="changed()" ...></pagination>

Since you are using ui-bootstrap-tpls-0.10.0.min.js, you need to use the old syntax - with page instead of ng-model:

<pagination page="currentPage" total-items="totalIdeas"></pagination>

edited Apr 24, 2016 at 12:00

David Salamon

2,4812 gold badges28 silver badges30 bronze badges

answered May 2, 2014 at 1:48

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Comments

bhavsac · Accepted Answer · 2016-02-11 06:45:06Z

0

Just to give concrete example:

 <uib-pager total-items="totalItems" items-per-page="4" ng-model="currentPage" ng-change="pageChanged()"></uib-pager>

and then tie pageChanged in your scope:

$scope.pageChanged=function(){
      console.log("Current page" + $scope.currentPage);
  };

answered Feb 11, 2016 at 6:45

bhavsac

1411 silver badge2 bronze badges

Collectives™ on Stack Overflow

Pagination in Angular UI Bootstrap throwing "Error: [$compile:nonassign]"

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related