title: Pagination with AngularJS?
body: <p>I've tried pagination with AngularJS but I'm not able to implement certain things, like. </p>
  
  <p>I'm able to navigate through using the '<strong>next</strong>' and '<strong>previous</strong>' but am not sure how to achieve it by just clicking on that particular '<strong>page number</strong>' <em>button</em>. And I also want to add focus to the particular '<strong>page number</strong>' <em>button</em> on clicking '<strong>next</strong>' and '<strong>previous</strong>'</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app='myApp'&gt;
      Hello World
      &lt;div ng-controller="MyCtrl"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"&gt;
              {{item}}
          &lt;/li&gt;
      &lt;/ul&gt;
  
       &lt;input type="image" src="images/btn_previous.png" alt="previous" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"&gt;
      &lt;button ng-click="currentPage = currentPage"&gt;
          {{currentPage+1 &lt;= numberOfPages()-2 &amp;&amp; currentPage+1 || numberOfPages()-2}}
      &lt;/button&gt;
      &lt;button ng-click="currentPage = currentPage"&gt;
          {{currentPage+2 &lt;= numberOfPages()-1 &amp;&amp; currentPage+2 || numberOfPages()-1}}
      &lt;/button&gt;
      &lt;button &gt;
          {{currentPage+3 &lt;= numberOfPages() &amp;&amp; currentPage+3 || numberOfPages()}}
      &lt;/button&gt; . . .
      &lt;button &gt;
          {{numberOfPages()}}
      &lt;/button&gt;
      &lt;input type="image" src="images/btn_next.png" alt="next" ng-disabled="currentPage &gt;= data.length/pageSize - 1" ng-click="currentPage=currentPage+1"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var app=angular.module('myApp', []);
  
  function MyCtrl($scope) {
      $scope.currentPage = 0;
      $scope.pageSize = 5;
      $scope.data = [];
      $scope.numberOfPages=function(){
          return Math.ceil($scope.data.length/$scope.pageSize);                
      }
      for (var i=0; i&lt;45; i++) {
          $scope.data.push("Item "+i);
      }
  }
  
  app.filter('startFrom', function() {
      return function(input, start) {
          start = +start; //parse to int
          return input.slice(start);
      }
  });
  </code></pre>
  
  <p>Can someone please help me?</p>