Cacher is the code snippet organizer for pro developers

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 600px; 
    height: 300px;
}

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5, 10, 20],
        pageSize: 5,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){	
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('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('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.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
	
    $scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };
});

[{"name": "Moroni", "allowance": 505050505050505050,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false},
{"name": "Jacob", "allowance": 27,  "paid": false},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false},
{"name": "Ether", "allowance": 42,  "paid": false},
{"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true},
{"name": "Moroni", "allowance": 50,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false},
{"name": "Jacob", "allowance": 27,  "paid": false},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false},
{"name": "Ether", "allowance": 42,  "paid": false},
{"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true},
{"name": "Moroni", "allowance": 50,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false},
{"name": "Jacob", "allowance": 27,  "paid": false},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false},
{"name": "Ether", "allowance": 42,  "paid": false},
{"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true},
{"name": "Moroni", "allowance": 50,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false},
{"name": "Jacob", "allowance": 27,  "paid": false},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false},
{"name": "Ether", "allowance": 42,  "paid": false},
{"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true},
{"name": "Moroni", "allowance": 50,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false}]

<!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>