Estou trabalhando na configuração da paginação angular em uma tabela que estou criando.

Eu trabalhei com os documentos. No entanto, não estou vendo como conectar a paginação à tabela. O tamanho da minha paginação corresponde ao tamanho da matriz. Eles são o número certo de links de botão para paginar o tamanho da página. No entanto, minha mesa ainda está em todo o comprimento, impossibilitando que eu teste minha paginação.

Aqui está o corpo da minha mesa

     <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>

Coloquei o corpo da minha mesa fora doetiqueta de mesaEu tentei dentro, mas meus controles de paginação não apareceram.

Aqui está a minha paginação

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

Eu também montei ump para garantir que as guias estejam respondendo

   <div> 
        <p>total Items [[totalItems]]</p>
        <p>itemsPerPage [[itemsPerPage]]</p>
        <p>current page [[currentPage]]</p>
    </div>

O total de itens, itens por página e página atual dentro do paragraphare, todos respondendo a cada clique no controlador de paginação. No entanto, a tabela não está mudando.

Aqui está o meu controlador

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < 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;
      });
    }; 

Quando o trabalho funcionar, passo a maior parte para uma diretiva. Eu só quero configurá-lo primeiro.