AngularJS ui-grid pagination | Web Programming examples

AngularJS : 1.6.5
ui-grid : 4.0.6
include file

<link href="http://www.example.com/wp/wp-content/themes/ang/css/ui-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ui-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid.js'></script>
<div ng-controller="MyCtrl">
  <div class="row">
    <div class="col-sm-12">
      <div class="myGrid" ui-grid="gridOptions" ui-grid-pagination></div>
    </div>
  </div>
</div>

var myApp = angular.module('MyApp', ['ui.grid', 'ui.grid.pagination']);

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myData = [
      {name: "product-A", day: "2014/08/12", count: 50},
      {name: "product-B", day: "2014/08/12", count: 43},
      {name: "product-A", day: "2014/09/11", count: 27},
      {name: "product-B", day: "2014/07/23", count: 29},
      {name: "product-C", day: "2014/03/03", count: 34},
      {name: "product-D", day: "2014/08/12", count: 50},
      {name: "product-E", day: "2014/08/12", count: 43},
      {name: "product-F", day: "2014/09/11", count: 27},
      {name: "product-G", day: "2014/07/23", count: 29},
      {name: "product-H", day: "2014/03/03", count: 34},
      {name: "product-R", day: "2014/03/03", count: 34}
    ];

    $scope.gridOptions = {
      data: 'myData',
      enablePaging: true,
      showFooter: true,
      paginationCurrentPage : 1,
      paginationPageSizes: [3, 5, 8],
      paginationPageSize: 3
    };
}]);

(grid.css)
.myGrid {
  height: 300px;
}