AngularJS Example:

by tchatel

HTML

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

  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <h3>List View</h3>
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <table>
      <tr>
        <th>Numbers</th>
      </tr>
      <tr ng-repeat="number in numbers | filter:search">
        <td>{{number}}</td>
      </tr>
    </table>
  </script>

  <!-- CACHE FILE: other.html -->
  <script type="text/ng-template" id="other.html">
    <h3>Another View</h3>
  </script>
</div>

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', ListCtrl]);
app.controller('OtherCtrl', ['$scope', OtherCtrl]);
    
function ListCtrl($scope) {
    
}
function OtherCtrl($scope) {
}

var paginator = angular.module('paginator', []);
paginator.directive('paginator', function () {
    var pageSizeLabel = "Page size";
    return {
        priority: 0,
        restrict: 'A',
        scope: {items: '&'},
        template: '<div class="paginator">'
                +  '<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>'
                + '</div>',
        replace: true,
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    scope.paginator = {
                        pageSize: 20,
                        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++;
     ...