Пагинация не работает на угловом ui-bootstrap внутри вкладки

Question

У меня есть этот код http://plnkr.co/edit/thSwsookMIY6LZMftVhY?p=preview. Я просто попробовал нанести на страницу вкладку модуля ui-bootstrap. Моя проблема в том, что currentPage изменяется в области, но не обновляет отображаемые элементы.

Контроллер List.js

controllers.controller('List', function ($scope) { 

    $scope.itemsPerPage = 5; 
    $scope.currentPage = 1; 
    $scope.totalAds = 0; 

    $scope.pageCount = function() { 
     return Math.ceil($scope.totalAds/$scope.itemsPerPage); 
    }; 

    $scope.tabs = [ 
     { "category": "G", "active": true, "ads": [{ "title": "Tit 1 G", "content": "Content ad 1 g" }, { "title": "Tit 2 G", "content": "Content ad 2 g" }, { "title": "Tit 3 G", "content": "Content ad 3 g" }, { "title": "Tit 4 G", "content": "Content ad 4 g" }, { "title": "Tit 5 G", "content": "Content ad 5 g" }, { "title": "Tit 6 G", "content": "Content ad 6 g" }, { "title": "Tit 7 G", "content": "Content ad 7 g" }, { "title": "Tit 8 G", "content": "Content ad 8 g" }, { "title": "Tit 9 G", "content": "Content ad 9 g" }, { "title": "Tit 10 G", "content": "Content ad 10 g" }, { "title": "Tit 11 G", "content": "Content ad 11 g" }, { "title": "Tit 12 G", "content": "Content ad 12 g" }, { "title": "Tit 13 G", "content": "Content ad 13 g" }, { "title": "Tit 14 G", "content": "Content ad 14 g" }, { "title": "Tit 15 G", "content": "Content ad 15 g" }, { "title": "Tit 16 G", "content": "Content ad 16 g" }, { "title": "Tit 17 G", "content": "Content ad 17 g" }] }, 
     { "category": "C", "active": false, "ads": [{ "title": "Tit 1 C", "content": "Content ad 1 c" }, { "title": "Tit 2 C", "content": "Content ad 2 c" }, { "title": "Tit 3 C", "content": "Content ad 3 c" }] }, 
     { "category": "T", "active": false, "ads": [{ "title": "Tit 1 T", "content": "Content ad 1 t" }, { "title": "Tit 2 T", "content": "Content ad 2 t" }, { "title": "Tit 3 T", "content": "Content ad 3 t" }, { "title": "Tit 4 T", "content": "Content ad 4 t" }, { "title": "Tit 5 T", "content": "Content ad 5 t" }, { "title": "Tit 6 T", "content": "Content ad 6 t" }, { "title": "Tit 5 T", "content": "Content ad 5 t" }, { "title": "Tit 7 T", "content": "Content ad 7 t" }, { "title": "Tit 8 T", "content": "Content ad 8 t" }, { "title": "Tit 9 T", "content": "Content ad 9 t" }, { "title": "Tit 10 T", "content": "Content ad 10 t" }, { "title": "Tit 11 T", "content": "Content ad 11 t" }, { "title": "Tit 12 T", "content": "Content ad 12 t" }, { "title": "Tit 13 T", "content": "Content ad 13 t" }, { "title": "Tit 14 T", "content": "Content ad 14 t" }, { "title": "Tit 15 T", "content": "Content ad 15 t" }, { "title": "Tit 16 T", "content": "Content ad 16 t" }, { "title": "Tit 17 T", "content": "Content ad 17 t" }, { "title": "Tit 18 T", "content": "Content ad 18 t" }, { "title": "Tit 19 T", "content": "Content ad 19 t" }] }, 
     { "category": "A", "active": false, "ads": [{ "title": "Tit 1 A", "content": "Content ad 1 a" }, { "title": "Tit 2 A", "content": "Content ad 2 a" }] } 
    ]; 

    $scope.getTotal = function() { 
     $scope.totalAds = 0; 
     angular.forEach($scope.tabs, function (tab) { 
      if (tab.active) { 
       $scope.totalAds = tab.ads.length; 
      } 
     }); 
    }; 

    $scope.selectedAds = function (category) { 
     var ads = []; 
     angular.forEach($scope.tabs, function (tab) { 
      if (tab.category == category) { 
       ads = tab.ads; 
      } 
     }); 
     return ads; 
    }; 

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

    $scope.category = function() { 
     return $scope.tabs.filter(function (tab) { 
      return tab.active; 
     })[0].category; 
    }; 

    $scope.$watch('category()', function() { 
     $scope.currentPage = 1; 
     $scope.getTotal(); 
     var end = $scope.currentPage + $scope.itemsPerPage; 
     $scope.filteredAds = $scope.selectedAds($scope.category()).slice(0, end); 
    }); 

    $scope.$watch('currentPage', function() { 
     var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), 
     end = begin + $scope.itemsPerPage; 

     $scope.filteredAds = $scope.selectedAds($scope.category()).slice(begin, end); 
    }); 

    $scope.getTotal(); 

}); 

index.html

<!DOCTYPE html> 
    <html ng-app="app"> 
     <head lang="es"> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <title>Adiminstración del tablón de anuncios</title> 
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> 
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script> 
      <script type="text/javascript" src="app.js"></script> 
      <script type="text/javascript" src="List.js"></script> 
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
     </head> 
     <body ng-controller="List"> 
       <tabset> 
        <tab ng-repeat="tab in tabs" heading="{{tab.category}}" active="tab.active"> 
         <ul> 
          <li ng-repeat="ad in filteredAds"> 
           <section> 
            <h3 ng-bind="ad.title"></h3> 
            <p ng-bind="ad.content"></p> 
           </section> 
          </li> 
         </ul> 
         <pagination total-items="totalAds" items-per-page="itemsPerPage" ng-model="currentPage"></pagination> 
         <p> 
          Total items: {{totalAds}}<br /> 
          Items per page: {{itemsPerPage}}<br /> 
          Current Page: {{currentPage}} 
         </p> 
        </tab> 
       </tabset> 
     </body> 
    </html> 

Я попробовал решение, которое было размещено здесь (How do I tell ui-Bootstrap what content to paginate?), но это не работает для меня , Значение currentPage обновляется на странице, но $ watch не запускается.

Answer 1

Тот же вопрос, с которым я столкнулся, и решил его решить в результате небольших изменений кода. Это связано с тем, что tabset использует свой собственный контроллер, а родительский контроллер разбиения на страницы становится контроллером таблеток.

В контроллере добавить:

$scope.data = {}; 

в изменении шаблона нг-модели:

<pagination ng-model='data.currentPage'></pagination>