title: Pagination doesn't work on angular-ui-bootstrap inside of a tab
body: <p>I have this code <a href="http://plnkr.co/edit/thSwsookMIY6LZMftVhY?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/thSwsookMIY6LZMftVhY?p=preview</a>. I just tried put a pagination module of ui-bootstrap in a tab. My problem is that currentPage changes in the scope, but doesn't refresh the items that is showing.</p>
  
  <p><strong>Controller List.js</strong></p>
  
  <pre><code>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();
  
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html ng-app="app"&gt;
          &lt;head lang="es"&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
              &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;title&gt;Adiminstración del tablón de anuncios&lt;/title&gt;
              &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="List.js"&gt;&lt;/script&gt;
              &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /&gt;
          &lt;/head&gt;
          &lt;body ng-controller="List"&gt;
                &lt;tabset&gt;
                      &lt;tab ng-repeat="tab in tabs" heading="{{tab.category}}" active="tab.active"&gt;
                        &lt;ul&gt;
                            &lt;li ng-repeat="ad in filteredAds"&gt;
                                &lt;section&gt;
                                    &lt;h3 ng-bind="ad.title"&gt;&lt;/h3&gt;
                                    &lt;p ng-bind="ad.content"&gt;&lt;/p&gt;
                                &lt;/section&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;pagination total-items="totalAds" items-per-page="itemsPerPage" ng-model="currentPage"&gt;&lt;/pagination&gt;
                        &lt;p&gt;
                            Total items: {{totalAds}}&lt;br /&gt;
                            Items per page: {{itemsPerPage}}&lt;br /&gt;
                            Current Page: {{currentPage}}
                        &lt;/p&gt;
                      &lt;/tab&gt;
                &lt;/tabset&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I've tried the solution that been posted here (<a href="https://stackoverflow.com/questions/23653427/how-do-i-tell-ui-bootstrap-what-content-to-paginate">How do I tell ui-Bootstrap what content to paginate?</a>) but it doesn't work for me. The value currentPage refresh in the page but the $watch doesn't fired.</p>