Angular.JS Table with Pagination

Awesome example of HTML table with Pagination written in JavaScript using Angular.js libary

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-controller="ctrlRead">
    <table class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <th class="id" custom-sort order="'id'" sort="sort">Id&nbsp;</th>
                <th class="name" custom-sort order="'name'" sort="sort">Name&nbsp;</th>
                <th class="description" custom-sort order="'description'" sort="sort">Description&nbsp;</th>
                <th class="field3" custom-sort order="'field3'" sort="sort">Field 3&nbsp;</th>
                <th class="field4" custom-sort order="'field4'" sort="sort">Field 4&nbsp;</th>
            </tr>
        </thead>
        <tfoot>
            <td colspan="6">
                <div class="pagination pull-right">
                    <ul>
                        <li ng-class="{disabled: currentPage == 0}"> <a href ng-click="prevPage()">« Prev</a>

                        </li>
                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{active: n == currentPage}" ng-click="setPage()"> <a href ng-bind="n + 1">1</a>

                        </li>
                        <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}"> <a href ng-click="nextPage()">Next »</a>

                        </li>
                    </ul>
                </div>
            </td>
        </tfoot> <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
 <pre>currentPage: {{currentPage|json}}</pre>
 <pre>currentPage: {{sort|json}}</pre>

        <tbody>
            <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
  ...

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('ctrlRead', function ($scope, $filter) {

    // init
    $scope.sort = {
        sortingOrder: 'id',
        reverse: false
    };

    $scope.gap = 5;

    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = [{
        "id": 1,
        "name": "name 1",
        "description": "description 1",
        "field3": "field3 1",
        "field4": "field4 1",
        "field5 ": "field5 1"
    }, {
        "id": 2,
        "name": "name 2",
        "description": "description 1",
        "field3": "field3 2",
        "field4": "field4 2",
        "field5 ": "field5 2"
    }, {
        "id": 3,
        "name": "name 3",
        "description": "description 1",
        "field3": "field3 3",
        "field4": "field4 3",
        "field5 ": "field5 3"
    }, {
        "id": 4,
        "name": "name 4",
        "description": "description 1",
        "field3": "field3 4",
        "field4": "field4 4",
        "field5 ": "field5 4"
    }, {
        "id": 5,
        "name": "name 5",
        "description": "description 1",
        "field3": "field3 5",
        "field4": "field4 5",
        "field5 ": "field5 5"
    }, {
        "id": 6,
        "name": "name 6",
        "description": "description 1",
        "field3": "field3 6",
        "field4": "field4 6",
        "field5 ": "field5 6"
    }, {
        "id": 7,
        "name": "name 7",
        "description": "description 1",
        "field3": "field3 7",
        "field4": "field4 7",
        "field5 ": "field5 7"
    }, {
        "id": 8,
        "name": "name 8",
        "description": "description 1",
        "field3": "field3 8",
        "field4": "field4 8",
        "field5 ": "field5 8"
    }, {
        "id": 9,
        "name": "name 9",
        "description": "description 1",
        "field3": "field3 9",
        "field4": "field4 9",
    ...