title: Slice ng-repeat in pagination Angular
body: <p>Hey I have one question about pagination. This code is useful when I load data from database e.g. list of users. But now I want to dynamically create inputs (for quiz questions) and use <code>$index</code> in <code>ng-repeat</code>.</p>
  
  <p>There's a problem, however: because I use <code>slice</code> in pagination, <code>$index</code> is sliced too. In my example there are two items on the page, but if you create more than two you'll see the same numbers - 'Question 1' and 'Question 2' on all the pages.</p>
  
  <p>How I can correctly set up <code>$index</code> in pagination? I would like that on first page will be 1,2 on second 3,4 etc.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', ['ui.bootstrap'])
  
  .controller('myCtrl', function($scope){
    $scope.currentPage = 2;
    $scope.itemsPerPage = 2; 
    $scope.questionQuiz = [];
    $scope.addQuizQuestion = function(){
      $scope.questionQuiz.push({});
      $scope.totalItems = $scope.questionQuiz.length;
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a:hover
  {
    cursor: pointer
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
  &lt;script src="example.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"&gt;
  &lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
    &lt;a class="input-group-addon" ng-click="addQuizQuestion()"&gt;
      &lt;i class="fa fa-plus"&gt;&lt;/i&gt;&amp;nbsp;Add question
    &lt;/a&gt; 
    &lt;div ng-repeat="question in questionQuiz.slice(((currentPage-1)*itemsPerPage), ((currentPage*itemsPerPage))) track by $index"&gt;
     &lt;label&gt;&lt;h3&gt;Question {{$index + 1}}&lt;/h3&gt;&lt;/label&gt;                      
     &lt;input type="text" ng-model="input[$index]" class="form-control" placeholder="Write something..."&gt;
    &lt;/div&gt; 
    &lt;pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm text-center" items-per-page="itemsPerPage" previous-text="Prev" next-text="Next"&gt;     &lt;/pagination&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>