ngGrid with client side pagination (incomplete) NB: Altering example from website for server-side data.

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [
    {name: "Moroni", age: 50}
    , {name: "Tiancum",age: 43}
    , {name: "Jacob",age: 27}
    , {name: "Nephi",age: 29}
    , {name: "Enos",age: 34}
    , {name: "Mark", age: 25}
    , {name: "Tiancum",age: 43}
    , {name: "Jacob",age: 27}
    , {name: "Nephi",age: 29}
    , {name: "Enos",age: 34}
    , {name: "Mark", age: 25}
    , {name: "Tiancum",age: 43}
    , {name: "Jacob",age: 27}
    , {name: "Nephi",age: 29}
    , {name: "Enos",age: 34}
    , {name: "Mark", age: 25}
    , {name: "Tiancum",age: 43}
    , {name: "Jacob",age: 27}
    , {name: "Nephi",age: 29}
    , {name: "Enos",age: 34}
    , {name: "Mark", age: 25}
    , {name: "Tiancum",age: 43}
    , {name: "Jacob",age: 27}
    , {name: "Nephi",age: 29}
    , {name: "Enos",age: 34}
    , {name: "Mark", age: 25}];

  $scope.gridOptions = {
    data: 'myData'
  };

  $scope.totalItems = 0;

  $scope.pagingOptions = {
    pageSizes: [5, 10, 20],
    pageSize: 5,
    currentPage: 1
  };

  $scope.filterOptions = {
    filterText: "",
    useExternalFilter: true
  };

  $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {		
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };
	
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

  $scope.$watch('pagingOptions', function(newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.myData($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
  }, true);

  $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalItems',
    pagingOptions: $scope.pagingOptions
  };
});