angularjs - connecting angular bootstrap ui paginate to table -

i working on setting angular pagination on table creating.

i have worked through docs. however, not seeing how connect pagination table. pagination size matching array size. right number of button links page page length. however, table still @ full length making impossible me test pagination.

here table body

     <tbody>                 <tr ng-repeat="drink in editabledrinklist | orderby:'-date'">                      <td>[[drink.name]]</td>                     <td>[[drink.date |date: format :timezone]]</td>                     <td>[[drink.caffeinelevel]]</td>                     <td>                         <a ng-click="delete(drink._id)">                             <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>                         </a>                          <a href="" ng-click="update(drink)">                             <i style="font-size:22px;" class="fa fa-pencil-square-o"></i>                         </a>                     </td>                 </tr>      </tbody> 

i have set table body outside of table tag tried inside pagination controls did not appear.

here pagination

<pagination           total-items="totalitems"          ng-model="currentpage"          items-per-page="itemsperpage"          ng-change="pagechanged()"          ng-click="setpage(currentpage)"> </pagination> 

i set p tag make sure tabs responding

   <div>          <p>total items [[totalitems]]</p>         <p>itemsperpage [[itemsperpage]]</p>         <p>current page [[currentpage]]</p>     </div> 

the total items, items per page , current page inside of paragraphare responding each click on pagination controller. table not changing.

here controller

var editabledrinkset = function(){       editablearray = [];        drinklibrary.getalldrinks().success(function(data){         (var = 0; < data.length; i++) {           if(data[i].editable) {             editablearray.push(data[i])           };         };         $scope.currentpage = 1;         $scope.totalitems = editablearray.length;          $scope.itemsperpage =10;         $scope.maxsize = 3;          $scope.setpage = function(pageno) {           $scope.currentpage = pageno;         }         $scope.pagechanged = function() {           $log.log('page changed to: ' + $scope.currentpage);         };          $scope.editabledrinklist = editablearray;       });     };  

when working move of out directive. want set first.

you can custom filter.

add custom filter ngrepeat

you need able tell repeat index going starting point each page , how many items include on page. can creating simple filter (i called pages). filter going use currentpage , itemsperpage values set in controller.

<tr ng-repeat="drink in editabledrinklist | orderby:'-date' | pages: currentpage : itemsperpage">  

create custom filter

to create custom filter pass in name , factory function returns worker function. worker function automatically receives input array first value. subsequent values ones specified in filter.

so pages filter gets input array , 2 values passed (currentpage , pagesize). you'll use array.slice return new array repeat. remember, filters non-destructive. aren't changing actual scoped array. creating new array repeat use.

app.filter('pages', function() {   return function(input, currentpage, pagesize) {     //check if there array work don't error on first digest     if(angular.isarray(input)) {       //arrays 0-base, subtract 1 currentpage value calculate slice start       var start = (currentpage-1)*pagesize;       //slice extracts to, not including, element indexed @ end parameter,       //so multiply currentpage pagesize end parameter       var end = currentpage*pagesize;       return input.slice(start, end);     }   }; }); 

add pagination directive page

here's cleaned version of directive you'll add html. don't use kind of ngclick or ngchange on pagination directive. ngmodel set currentpage variable there's nothing else have do. since currentpage two-way bound via ngmodel, when changes pagination directive update pages filter, in turn update repeated table rows.

<pagination       total-items="totalitems"      ng-model="currentpage"      items-per-page="itemsperpage"     max-size="maxsize"> </pagination> 

it's simple. if want see working demo, check plunker.

plunker