Angular UI bootstrap pagination not working inside ui.bootstrap.tabs

Question

Angular UI bootstrap gives awesome solutions. Very unfortunately Pagination (ui.bootstrap.pagination) does not working inside Tabs (ui.bootstrap.tabs)

DEMO http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.todos = [{
    "id": 1,
    "date": "12-Jan-2015",
    "cheque_no": 11111,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 2,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 3,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 4,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 5,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 6,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 7,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 8,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 9,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 10,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 11,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 12,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 13,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 14,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 15,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 16,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 17,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 18,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 19,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 20,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 21,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 22,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 23,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 24,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 25,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 26,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 27,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 28,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 29,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 30,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 31,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 32,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 33,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 34,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 35,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 36,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 37,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 38,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 39,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 40,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }];

  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage),
      end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">

    <tabset>
      <tab>
        <tab-heading>Statement</tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{todos.length}} total</h4>
          <ul>
            <li ng-repeat="todo in filteredTodos">{{todo.id}} Index: {{$index}}</li>
          </ul>
          <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
          </pagination>
        </div>
      </tab>
    </tabset>
  </div>
</div>

Betty St · Answer 1 · 2015-06-30T21:12:05.453

4

Your $watchdoesn't work! If you put console.log($scope.currentPage) inside your $watch function you will see, that there will be no output when the page changes.

I recommend using ng-change on the pagination element and define a function on the scope (instead of the $watch)!

@see http://angular-ui.github.io/bootstrap/#/pagination

To make sure that the currentPage model is updated you can set an object instead of just an integer (key to scope inheritance!)

// JS
$scope.pagination = { currentPage: 1 };
// HTML
<pagination ng-model="pagination.currentPage">

I recommend reading this article: https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Jun 30 '15 at 21:12

answered Jun 30 '15 at 20:57

Betty St

2,741
21
33

1

i tried to use ng-change, and the $scope.currentPage is also not updated. – user3227295 Jun 30 '15 at 21:01
@Betty St thanks for your effort. From here the solution I have got something different https://github.com/angular-ui/bootstrap/issues/3881. As beginner bit hard for me to understand :( – Mo. Jun 30 '15 at 21:04
sorry I updated my answer, I think it is a simple scope inheritance problem! – Betty St Jun 30 '15 at 21:06
I was having issues with 2 paginations not sharing the same state for the same content (one at top, one at bottom). Keeping all state related values in an object fixed it like `$scope.pagination = { currentPage: 1 };` thanks. – burcakulug Oct 09 '15 at 13:44

score 0 · Answer 2 · answered Jul 03 '15 at 15:37

Finally found solution with filter() instead of worry about $scope

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.todos = [{
    "id": 1,
    "date": "12-Jan-2015",
    "cheque_no": 11111,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 2,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 3,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 4,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 5,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 6,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 7,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 8,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 9,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 10,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 11,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 12,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 13,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 14,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 15,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 16,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 17,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 18,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 19,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 20,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 21,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 22,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 23,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 24,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 25,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 26,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 27,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 28,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 29,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 30,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 31,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 32,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 33,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 34,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 35,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 36,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 37,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 38,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 39,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 40,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }];
}).filter('pagination', function() {
   return function(input, currentPage, pageSize) {
     if(angular.isArray(input)) {
       var start = (currentPage-1)*pageSize;
       var end = currentPage*pageSize;
       return input.slice(start, end);
     }
   };
 });

.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">

    <tabset>
      <tab>
        <tab-heading>Statement</tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{todos.length}} total</h4>
          <ul>
            <li ng-repeat="todo in todos| pagination: currentPage : numPerPage">{{todo.id}} Index: {{$index}}</li>
          </ul>
          <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
          </pagination>
        </div>
      </tab>
    </tabset>
  </div>
</div>

score 0 · Answer 3 · answered Sep 12 '16 at 09:02

0

Try using this

<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>

answered Sep 12 '16 at 09:02

Swanand Keskar

1,023
1
13
27

Angular UI bootstrap pagination not working inside ui.bootstrap.tabs

3 Answers3

Linked