Angular UI Bootstrap Pagination ng-model не обновляется

Я пытаюсь использовать директиву Pagination UI Bootstrap в моем проекте, но по какой-то странной причине ng-модель, используемая для обновления текущей страницы, не работает. Отображение страницы отображается правильно с правильным количеством вкладок и всего, но когда я нажимаю на другое число, переменная ng-model не обновляется. Для жизни меня я не могу понять, почему бы и нет.

Используемый мной код берется из примеров на домашней странице UI Bootstrap:

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

Контроллер выглядит следующим образом:

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

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

Вот различные требуемые источники, в которые я включаю:

<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>

Самое странное, что я создал plnkr, который копирует мой код, и он работает! Вы можете посмотреть здесь: http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

Может ли кто-нибудь подумать о каких-либо идеях, которые могли бы заставить это не работать? Я почесываю голову здесь и не могу придумать ничего очевидного, что я делаю неправильно...

Вся помощь очень понравилась!

Ответ 1

Я столкнулся с той же проблемой и решил ее, обернув все объекты Angular UI Bootstrap Pagination в объект, например:

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>

Ответ 2

У меня тоже была такая же проблема. Обнаружено, что причиной этой проблемы является bootstrap-tpls-0.10.0.js. Просто замените его bootstrap-tpls-0.11.0.js, чтобы он работал.

Ниже приведена комбинация библиотек:

<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>