title: Problems with `track by $index` with Angular UI Carousel
body: <h3>$index in track by index does not start at zero when pagination is used</h3>
  <p>I have created a carousel using angular ui bootsrap.
  Since am loading so many images(over 1,000), I used a filter to display 500 pictures in the pagination.</p>
  <pre><code>.filter('pages', function () {
      return function (input, currentPage, pageSize) {
          if (angular.isArray(input)) {
              var start = (currentPage - 1) * pageSize;
              var end = currentPage * pageSize;
              return input.slice(start, end);
          }
      };
  })
  </code></pre>
  <p>The controller:</p>
  <pre><code>self.currentPage = 1;
  self.itemsPerPage = 500;
  self.maxSize = 10;
  
  //imagesUrls is response.data from http call
  angular.forEach(imagesUrls, function (parent) {
      var date = uibDateParser.parse(parent.fileCreationTime, 'M/d/yyyy 
                       hh:mm:ss a');
      // fill our slide arrays with urls
      // model update here
      self.slides.push({
          image: parent.fileName,
          time: date,
          id: parent.id
      });      
  });
  self.totalItems = self.slides.length;
  </code></pre>
  <p>And I use it like this:</p>
  <pre><code>&lt;div uib-carousel 
       active=&quot;$ctrl.active&quot;
       interval=&quot;$ctrl.myInterval&quot;
       no-wrap=&quot;$ctrl.noWrapSlides&quot;
       no-pause=&quot;true&quot;&gt;
       &lt;div uib-slide ng-repeat=&quot;slide in $ctrl.slides | pages: 
                $ctrl.currentPage : $ctrl.itemsPerPage track by $index&quot; 
            index=&quot;$index&quot;&gt;
           &lt;img id=&quot;carousel-img&quot; ng-src=&quot;{{slide.image}}&quot;&gt;
           &lt;div class=&quot;carousel-caption&quot;&gt;
               &lt;p&gt;Index {{$index}}&lt;/p&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;ul uib-pagination
          total-items=&quot;$ctrl.totalItems&quot;
          items-per-page=&quot;$ctrl.itemsPerPage&quot;
          ng-model=&quot;$ctrl.currentPage&quot;
          max-size=&quot;$ctrl.maxSize&quot;
          boundary-link-numbers=&quot;true&quot;
          force-ellipses=&quot;true&quot;
          class=&quot;pagination-sm&quot;&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  <p>This works as expected.</p>
  <p>When the carousel is first loaded, the index is 0. When it moves to the next slide the index is 1, when you move to the next slide the index is 2.
  When you display the slide.id of the current image it is also 2.</p>
  <p>The problem:</p>
  <p>However, when you click the second pagination link, the index does not go back to zero, its starts at the last index the slide was in the carousel.</p>
  <p>So now the index is 2 and slide id of the current image is 502.</p>
  <p>If you slide till index 20, and you click the pagination link, the index is still at 20. When you display the slide id of the current image it becomes 520.</p>
  <p>Is there a way to make the index start at 0 again so the slide.id is 500 and not 502 or 520?</p>
  <p>I hope my question is clear.</p>