AngularJS 1.5.x, using pagination in our table

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.name = 'World';
  $scope.items = [];
  $scope.copy_items = [];
  $scope.limit = 50;
  $scope.pages = [];
  $scope.navigators = {prev:{state:true}, next:{state:true}};
  
  
  /**
   * this just emulate our record for us
   */ 
  for(i=0; i<200; i++)
    $scope.items.push({id:'id_'+i,name:'Name '+i});
    
 
 /**
  * calculate the number of pages for us and 
  * then set the first one as our active page
  */ 
  $scope.paginate = function(){ 
    $scope.pages = [];//clear it here resetting
    var n = Math.ceil($scope.items.length / $scope.limit);
    for(i=0; i<n; i++)
      $scope.pages.push({start:(i*$scope.limit), page:i+1, active:false});
   
    //set the first to active one 
    $scope.setPageActive(1); 
  }
  
  /**
   * this helps to set the wanted page number to be active
   */ 
  $scope.setPageActive = function(page){
    index = page-1;
    var n =   $scope.pages.length;
    var previous_page = 1;
    for(i=0; i<n; i++){
      if($scope.pages[i].active)
        current_page = $scope.pages[i].page;
    
      if(i==index)
        $scope.pages[i].active = true;
      else
      $scope.pages[i].active= false;
    } 
  
  //do calculation of next page offseting here
 var limit = $scope.pages[index].start+$scope.limit;
  
  //keep it there so we dont mess with the original record
  $scope.copy_items = angular.copy($scope.items); 
  //slice dont add the limit so we add up, so we ignore the last one
  $scope.copy_items = $scope.copy_items.splice($scope.pages[index].start, limit+1);
 
 
 $scope.navigators["next"].state =  index < (n-1) ? true:false;
 $scope.navigators["prev"].state =  index > 0 ? true:false;
  }
  
  /**
   * this is triggered when the user hit on the prev button
   * this only works when the navigators.prev.state is true
   */ 
  $scope.prev = function(){ 
    if($scope.navigators.prev.state){
       $scope.setPageActive($scope.getCurrentPage()-1);
    }
  }
  
  /**
   * this is triggered when the user hit on the next button
   * this only works when the navigators.next.state is true
   */ 
  $scope.next = function(){
    if($scope.navigators.next.state){
       $scope.setPageActive($scope.getCurrentPage()+1);
    }
  }
  
  /**
   * this returns the current active page
   */ 
  $scope.getCurrentPage = function (){
    
     for(i=0;i<$scope.pages.length; i++)
      if($scope.pages[i].active)
        return i+1;
  }
  
    $scope.paginate();
 
  
    
    /**
     * remove our id from our itms 
     */
    $scope.remove = function (id){
      $scope.items = $filter('filter')($scope.items, function(value, index){
        return value.id !== id;
      });
    }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap@3.3.0" data-semver="3.3.0" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
      <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
   
    <script data-require="bootstrap@3.3.0" data-semver="3.3.0" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>Limit :       <input type="text" ng-model="limit" ng-change="paginate()" />
    </p>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in copy_items |  limitTo:limit">
          <td>{{$index + 1}}</td>
          <td>{{item.name}}</td>
          <td>
            <button type="button" class="btn btn-xs btn-danger" ng-click="remove(item.id)">remove</button>
          </td>
        </tr>
      </tbody>
    </table>
    <br />
    <nav aria-label="Page navigation" align="center">
        <ul class="pagination">
        <li ng-class="{disabled:!navigators.prev.state}">
          <a href="javascript:void();" aria-label="Previous" ng-click="prev()" >
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active:page.active}" ng-disabled="page.active">
          <a href="javascript:void();" ng-click="setPageActive(page.page)" >{{page.page}}</a>
        </li>
        <li ng-class="{disabled:!navigators.next.state}">
          <a   href="javascript:void();" aria-label="Next" ng-click="next()">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </body>

</html>

/* Put your css in here */