<link href="http://www.example.com/wp/wp-content/themes/ang/css/ng-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid1.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ng-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid1.js'></script>
<div ng-controller="MyCtrl2">
  <div class="row">
    <div class="col-sm-12">
      <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
      <div class="gridStyle" ng-grid="gridOptions">
      </div>
    </div>
  </div>
</div>

var myApp = angular.module('googleMapApp', ['ui.bootstrap','ngGrid']);

myApp.controller('MyCtrl', function($scope,$http) {
    $scope.pagingOptions = {
      pageSizes: [3, 5, 8],
      pageSize: 3,
      currentPage: 1
    };
    $scope.totalServerItems = 0;
    $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('../wp-content/themes/ang/json-grid.php').success(function (largeLoad) {
            data = largeLoad.filter(function(item) {
              return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
            });
            $scope.setPagingData(data,page,pageSize);
          });
        } else {
          $http.get('../wp-content/themes/ang/json-grid.php').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.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.gridOptions = {
      data: 'myData',
      enablePaging: true,
      showFooter: true,
      totalServerItems: 'totalServerItems',
      pagingOptions: $scope.pagingOptions,
      filterOptions: $scope.filterOptions
    };
});

<?php
require("dbinfo.php");
$dsn = 'mysql:host=localhost;dbname='.$database.';charset=utf8';
try {
  $dbh = new PDO($dsn, $username, $password,array(PDO::ATTR_EMULATE_PREPARES =>
false,PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`"));
} catch (PDOException $e) {
  exit('DB connect error'.$e->getMessage());
}
$st = $dbh->query("SELECT * FROM grid_products WHERE 1");
echo json_encode($st->fetchAll(PDO::FETCH_ASSOC));

?>