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:

Answer 1

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);
  };

Answer 2

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>