title: Improper pagination with AngularJS bootstrap
body: <p>HTML Code</p>
  
  <pre><code>&lt;body ng-app="MyApp"&gt;
    &lt;div ng-controller="PaginationCtrl"&gt;
      &lt;table class="table table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Id&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="item in pagedItems"&gt;
            &lt;td&gt;{{item.id}}&lt;/td&gt;
            &lt;td&gt;{{item.name}}&lt;/td&gt;
            &lt;td&gt;{{item.description}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
          &lt;td colspan="3"&gt;
            &lt;div class="pagination"&gt;
              &lt;ul&gt;
                &lt;li ng-class="prevPageDisabled()"&gt;
                  &lt;a href ng-click="prevPage()"&gt;« Prev&lt;/a&gt;
                &lt;/li&gt;
                &lt;li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"&gt;
                  &lt;a href="#"&gt;{{n+1}}&lt;/a&gt;
                &lt;/li&gt;
                &lt;li ng-class="nextPageDisabled()"&gt;
                  &lt;a href ng-click="nextPage()"&gt;Next »&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code> var app = angular.module("MyApp", []);
  
  app.factory("Item", function() {
  
    var items = [];
    for (var i=0; i&lt;50; i++) {
      items.push({ id: i, name: "name "+ i, description: "description " + i });
    }
  
    return {
      get: function(offset, limit) {
        return items.slice(offset, offset+limit);
      },
      total: function() {
        return items.length;
      }
    };
  });
  
  app.controller("PaginationCtrl", function($scope, Item) {
  
    $scope.itemsPerPage = 20;
    $scope.currentPage = 0;
  
    $scope.range = function() {
      var rangeSize = 5;
      var ret = [];
      var start;
  
      start = $scope.currentPage;
      if ( start &gt; $scope.pageCount()-rangeSize ) {
        start = $scope.pageCount()-rangeSize;
      }
  
      for (var i=start; i&lt;start+rangeSize; i++) {
        ret.push(i);
      }
      return ret;
    };
  
  
    $scope.prevPage = function() {
      if ($scope.currentPage &gt; 0) {
        $scope.currentPage--;
      }
    };
  
    $scope.prevPageDisabled = function() {
      return $scope.currentPage === 0 ? "disabled" : "";
    };
  
    $scope.nextPage = function() {
      if ($scope.currentPage &lt; $scope.pageCount() - 1) {
        $scope.currentPage++;
      }
    };
  
    $scope.nextPageDisabled = function() {
      return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
    };
  
    $scope.pageCount = function() {
      return Math.ceil($scope.total/$scope.itemsPerPage);
    };
  
    $scope.setPage = function(n) {
      if (n &gt; 0 &amp;&amp; n &lt; $scope.pageCount()) {
        $scope.currentPage = n;
      }
    };
  
    $scope.$watch("currentPage", function(newValue, oldValue) {
      $scope.pagedItems = Item.get(newValue*$scope.itemsPerPage, $scope.itemsPerPage);
      $scope.total = Item.total();
    });
  
  });
  </code></pre>
  
  <p>Heres the fiddle. </p>
  
  <p><a href="http://jsfiddle.net/go14nac5/" rel="nofollow">http://jsfiddle.net/go14nac5/</a></p>
  
  <p>When the itemsPerPage is 5 or 10 the pagination works fine but when the itemsPerPage is changed to 20 or more. The pagination has a problem, where the page numbers are displayed with negative values and zero.</p>
  
  <p>Can someone help me sort this out to make a robust bootstrap pagination?</p>