Dinesh Sundaraneedi Dinesh Sundaraneedi - 10 months ago 51
AngularJS Question

How to use UI Bootstrap Pagination for a table, generated using ng-repeat

I am trying to keep pagination in my Angular application using

. I am unable to get proper way to do this.


<table id="mytable" class="table table-striped">
<tr class="table-head">
<tr ng-repeat="person in aCandidates">


$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;

I am able to see the pagination bar but no action is performed with that and the entire table data is rendered even after giving total-items as 10.

How exactly uib-pagination works and how is the data (in this case
) is linked to pagination.

Answer Source

The part you are missing is that you have to have a function to get the current page's data from your entire array. I've added a function called setPagingData to handle this.

app.controller('MainCtrl', function($scope) {
  var allCandidates = ['name1',

    $scope.totalItems = allCandidates.length;
    $scope.currentPage = 1;
    $scope.itemsPerPage = 5;

    // watch for changes to current page
    $scope.$watch('currentPage', function() {

    function setPagingData(page) {
       var pagedData = allCandidates.slice((page - 1) * $scope.itemsPerPage, page * $scope.itemsPerPage);
       $scope.aCandidates = pagedData;

You can see this in the forked plunker