Currently I implement a simple pagination with Angular.js and UIBootstrap but single show the first page u.u I have the next code:

Index.html

<div class="box-body table-responsive no-padding">
              <table class="table table-hover" ng-controller="IndexCtrl">
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Level</th>
                  <th>Actions</th>
                </tr>
                <tr ng-repeat="user in users| filter:search |startFrom:(currentPage - 1) * pageSize|limitTo: pageSize">
                  <td>@{{ user.name }}</td>
                  <td>@{{ user.email }}</td>
                  <td><span class="label label-success">@{{ user.level.permission }}</span></td>
                  <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                </tr>

              </table>
            </div><!-- /.box-body -->
            <uib-pagination total-items="users.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
           </uib-pagination>

Controller:

var Suap = angular.module('Suap', ['ui.bootstrap']);

 Suap.filter('startFrom',function(){
   return function(data, start){
    return data.slice(start);
 }
})
 .controller('IndexCtrl', function($scope, $http){
  $scope.users = [],
  $scope.pageSize=5,
  $scope.currentPage=1;


  $http({
    method: 'GET',
    url: '/route'
  }).then(function(response) {
     $scope.users = response.data;
  }); 
})

Thanks :D

Currently I implement a simple pagination with Angular.js and UIBootstrap but single show the first page u.u I have the next code:

Index.html

<div class="box-body table-responsive no-padding">
              <table class="table table-hover" ng-controller="IndexCtrl">
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Level</th>
                  <th>Actions</th>
                </tr>
                <tr ng-repeat="user in users| filter:search |startFrom:(currentPage - 1) * pageSize|limitTo: pageSize">
                  <td>@{{ user.name }}</td>
                  <td>@{{ user.email }}</td>
                  <td><span class="label label-success">@{{ user.level.permission }}</span></td>
                  <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                </tr>

              </table>
            </div><!-- /.box-body -->
            <uib-pagination total-items="users.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
           </uib-pagination>

Controller:

var Suap = angular.module('Suap', ['ui.bootstrap']);

 Suap.filter('startFrom',function(){
   return function(data, start){
    return data.slice(start);
 }
})
 .controller('IndexCtrl', function($scope, $http){
  $scope.users = [],
  $scope.pageSize=5,
  $scope.currentPage=1;


  $http({
    method: 'GET',
    url: '/route'
  }).then(function(response) {
     $scope.users = response.data;
  }); 
})

Thanks :D

• javascript
• jquery
• angularjs
• twitter-bootstrap
• pagination

• 3 and what is your question? – Chris L Commented Nov 2, 2015 at 0:12
• How can show all pages, because single show 1 but exist more – Lagul Commented Nov 2, 2015 at 0:16
• can you please check my question here? stackoverflow./questions/43546340/… – Ne AS Commented Apr 21, 2017 at 17:29

2 Answers 2

Your pager is outside of the controller scope since you only set the controller on the <table>

You need to move ng-controller higher up to an element that includes both your box-body element and the <uib-pagination> element

You need to bind all the page numbers to uib-pagination. For this create a function inside the controller and set the scope of current page value dynamically from the function. Also you need to put the ng-controller directive to root element in order to get the pagination