So I had the need to paginate, sort and filter on a table which used ng-repeat.

There were many iterations I played around with until I eventually came up with a working solution that could handle everything I needed.

Here's some example code that you can pick apart and use as you see fit:

CSS:

.pagination-buttons-td {
  border: none !important;
  text-align: right;
  background-color: #f0f3f4;
}
.sortorder:after {
  content: '\25b2';   // BLACK UP-POINTING TRIANGLE
}
.sortorder.reverse:after {
  content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
}

HTML Template:

<!-- Pagination buttons:  https://hi.service-now.com/styles/retina_icons/retina_icons.html -->
  <table class="table table-striped table-responsive">
    <tr>
      <td colspan="3" class="pagination-buttons-td">
        <div style="float: left;">
          <input ng-model="siteSearchFilter" ng-change="currentPage = 0" placeholder="Search..." type="text" />
        </div>
        <div>
          <button ng-disabled="currentPage == 0" ng-click="currentPage=0"><i class="icon-first"></i></button>
          <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><i class="icon-chevron-left"></i></button>
          {{currentPage+1}}/{{numberOfPages()}}
          <button ng-disabled="currentPage >= filteredList.length/rowsPerPage - 1" ng-click="currentPage=currentPage+1"><i class="icon-chevron-right"></i></button>
          <button ng-disabled="currentPage >= numberOfPages()-1" ng-click="currentPage=numberOfPages()-1"><i class="icon-last"></i></button>
        </div>
      </td>
    </tr>
    <tr style="background-color: #ddd;">
      <th class="text-nowrap" ng-click="sortBy('name')">
        <div class="th-title">Site</div>
        <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
      </th>

      <th class="text-nowrap" ng-click="sortBy('person1')">
        <div class="th-title">Person 1</div>
        <span class="sortorder" ng-show="propertyName === 'person1'" ng-class="{reverse: reverse}"></span></th>

      <th class="text-nowrap" ng-click="sortBy('person2')">
        <div class="th-title">Person 2</div>
        <span class="sortorder" ng-show="propertyName === 'person2'" ng-class="{reverse: reverse}"></span></th>
    </tr>

    <tr ng-repeat="site in data.sites | orderBy:propertyName:reverse | filter:siteSearchFilter as filteredList" 
        ng-if="($index < ((currentPage+1) * rowsPerPage)) && ($index >= (((currentPage+1) * rowsPerPage)-rowsPerPage))">

        <td>{{site.name}}</td>
        <td>{{site.person1}}</td>
        <td>{{site.person2}}</td>

    </tr>
</table>

Client script:

// Pagination stuff
$scope.currentPage = 0;
$scope.rowsPerPage = 10;
$scope.siteSearchFilter = '';
$scope.filteredList = [];
$scope.numberOfPages = function() {
        return Math.ceil($scope.filteredList.length/$scope.rowsPerPage);
};

// Sorting stuff
$scope.propertyName = '';
$scope.reverse = false;
$scope.data.sorting = {
    'by' : $scope.propertyName,
    'dir' : $scope.reverse ? 'desc':'asc'
}
$scope.sortBy = function(propertyName) {
    $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
    $scope.propertyName = propertyName;
    $scope.data.sorting = {
        'by' : $scope.propertyName,
        'dir' : $scope.reverse ? 'desc':'asc'
    }
};

And here's an example of it in action:

I hope this can help someone.