FrAngular : client-side paginator 1

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-view></div>

  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <h3><strong>List View</strong> | <a href="#/other">Other View</a></h3>
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <span paginator items="numbers | filter:search"></span>
    <table>
      <tr>
        <th>Numbers</th>
      </tr>
      <tr ng-repeat="number in pageItems()">
        <td>{{number}}</td>
      </tr>
    </table>
  </script>

  <!-- CACHE FILE: other.html -->
  <script type="text/ng-template" id="other.html">
    <h3><a href="#/">List View</a> | <strong>Other View</strong></h3>
    nothing here
  </script>
</div>

CSS

h3 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

table {
  font-size: 0.9em;
  text-align: right;
  margin: 1em;
}

table th {
  font-weight: bold;
}

[paginator] {
  margin: 3px;
  padding: 5px;
  border: 1px solid red;
}

JavaScript

var app = angular.module('app', ['paginator', 'util']);
app.config(function($routeProvider) {
  $routeProvider.
  when('/', {
    controller: 'ListCtrl',
    templateUrl: 'list.html'
  }).
  when('/other', {
    controller: 'OtherCtrl',
    templateUrl: 'other.html'
  }).
  otherwise({
    redirectTo: '/'
  });
});
app.controller('ListCtrl', ['$scope', 'numbers', ListCtrl]);
app.controller('OtherCtrl', ['$scope', OtherCtrl]);

function ListCtrl($scope, numbers) {
  $scope.numbers = numbers;
  $scope.$watch('search', function(newValue, oldValue) {
    if (newValue != oldValue) {
      $scope.firstPage();
    }
  });
}

function OtherCtrl($scope) {}

var paginator = angular.module('paginator', []);
paginator.directive('paginator', function() {
  var pageSizeLabel = "Page size";
  return {
    priority: 0,
    restrict: 'A',
    scope: {
      items: '&'
    },
    template: '<button ng-disabled="isFirstPage()" ng-click="decPage()">&lt;</button>' +
      '{{paginator.currentPage+1}}/{{numberOfPages()}}' +
      '<button ng-disabled="isLastPage()" ng-click="incPage()">&gt;</button>' +
      '<span>' + pageSizeLabel + '</span>' +
      '<select ng-model="paginator.pageSize" ng-options="size for size in pageSizeList"></select>',
    replace: false,
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) {
          scope.pageSizeList = [10, 20, 50, 100];
          scope.paginator = {
            pageSize: 10,
            currentPage: 0
          };

          scope.isFirstPage = function() {
            return scope.paginator.currentPage == 0;
          };
          scope.isLastPage = function() {
            return scope.paginator.currentPage >=
              scope.items().length / scope.paginator.pageSize - 1;
          };
          scope.incPage = function() {
            if (!scope.isLastPage()) {
              scope.paginator.currentPage++;
            }
          };
         ...