Pagination in HTML table using AngularJS

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="services.js"></script>
    <script src="main.js"></script>

  </head>

  <body>
    <div ng-app="paginationApp">
      <div style="margin-left:5px;margin-top:10px" ng-controller="mainCtrl">
        <pgn-table conf="config"></pgn-table>
      </div>
    </div>
  </body>

</html>

var mainModule = angular.module('paginationApp',[]);
mainModule.factory("employees",function($http,$q){
  

 var self=this;
 var defer=$q.defer();
   $http.get("./employees.json").success(function(data){
  var empData=data.employees;
    defer.resolve(empData);
    
  })
 return defer.promise;
});

 {
   "employees": [{

     "name": "Jay",
     "age": 27,
     "company": "ABC",
     "tech": "Js"
   }, {
     "name": "Rayn",
     "age": 30,
     "company": "NBC",
     "tech": ".net"
   }, {
     "name": "Stan",
     "age": 29,
     "company": "Amazon",
     "tech": "Java"
   }, {
     "name": "Stan",
     "age": 29,
     "company": "Amazon",
     "tech": "Java"
   }, {
     "name": "Bob",
     "age": 40,
     "company": "E-bay",
     "tech": "C"
   }, {
     "name": "Mike",
     "age": 32,
     "company": "Google",
     "tech": "Python"
   }, {
     "name": "Frank",
     "age": 32,
     "company": "Google",
     "tech": "Python"
   }, {
     "name": "David",
     "age": 32,
     "company": "Google",
     "tech": "Python"
   }, {
     "name": "Jade",
     "age": 32,
     "company": "Google",
     "tech": "Python"
   }, {
     "name": "Suresh",
     "age": 28,
     "company": "STS",
     "tech": "Python"
   }, {
     "name": "Akash",
     "age": 35,
     "company": "TCS",
     "tech": "Python"
   }, {
     "name": "Phill",
     "age": 22,
     "company": "Apple",
     "tech": "Python"
   }, {
     "name": "Stu",
     "age": 19,
     "company": "ebay",
     "tech": "Python"
   }]
 }

<div>
  <table class="table table-bordered acttable" >
    <thead>
      <th ng-repeat="hd in conf.heads">
        
        {{hd}}
           </th>
    </thead>
    <tbody>
      <tr ng-repeat="data in conf.myData | limitTo:numLimit:start">
        <td ng-repeat="d in conf.heads"><span>{{data[d]}}</span>
        </td>
      </tr>
      <tr>
        <td colspan="5"><span style="padding:5px">{{numLimit}} records per page</span> <span style='text-align: center'>Page# {{currentPage}} of {{pages}}</span> 
         <span style="float:right;padding:5px"><a ng-hide="hidePrev()" href="" ng-click="PrevPage()">Prev</a></span>

        <span style="float:right;padding:5px"><a ng-hide="hideNext()" href="" ng-click="nextPage()">Next</a></span></td>
      </tr>
    </tbody>
  </table>
  
</div>

var myApp = angular.module('paginationApp');
myApp.controller('mainCtrl', function($scope,employees) {
  employees.then(function(data){
    
  $scope.config.myData=data;
  });
  $scope.config = {
    heads: ['name', 'age', 'company', 'tech']
  };

});

myApp.directive('pgnTable', ['$compile',
  function($compile) {
    return {
      restrict: 'E',
      templateUrl: 'tabletemplate.html',
      replace: true,
      scope: {
        conf: "="
      },
      controller: function($scope) {
      
      $scope.currentPage=1;
      $scope.numLimit=5;
      $scope.start = 0;
      $scope.$watch('conf.myData',function(newVal){
        if(newVal){
         $scope.pages=Math.ceil($scope.conf.myData.length/$scope.numLimit);
   
        }
      });
      $scope.hideNext=function(){
        if(($scope.start+ $scope.numLimit) < $scope.conf.myData.length){
          return false;
        }
        else 
        return true;
      };
       $scope.hidePrev=function(){
        if($scope.start===0){
          return true;
        }
        else 
        return false;
      };
      $scope.nextPage=function(){
        console.log("next pages");
        $scope.currentPage++;
        $scope.start=$scope.start+ $scope.numLimit;
        console.log( $scope.start)
      };
      $scope.PrevPage=function(){
        if($scope.currentPage>1){
          $scope.currentPage--;
        }
        console.log("next pages");
        $scope.start=$scope.start - $scope.numLimit;
        console.log( $scope.start)
      };
      },
      compile: function(elem) {
        return function(ielem, $scope) {
          $compile(ielem)($scope);
        };
      }
    };
  }
]);