Estoy trabajando para configurar la paginación angular en una tabla que estoy creando.

He trabajado a través de los documentos. Sin embargo, no veo cómo conectar la paginación a la tabla. Mi tamaño de paginación coincide con el tamaño de la matriz. Son el número correcto de enlaces de botones para paginar la longitud de la página. Sin embargo, mi tabla todavía es larga, por lo que me es imposible probar mi paginación.

Aquí está el cuerpo de mi 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>

He puesto el cuerpo de mi mesa fuera deletiqueta de mesaLo intenté por dentro pero mis controles de paginación no aparecieron.

Aquí está mi paginación

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

También establecí unetiqueta p para asegurarse de que las pestañas responden

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

El total de elementos, elementos por página y página actual dentro del paragraphare todos responden a cada clic en el controlador de paginación. Sin embargo, la tabla no está cambiando.

Aquí está mi 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;
      });
    }; 

Cuando lo haga funcionar, moveré la mayor parte a una directiva. Solo quiero configurarlo primero.