title: $index inside ng-repeat with ng-if
body: <p>I Have an array of items like this which contains a list of animals and a list of fruits in a random order.</p>
  
  <pre><code> $scope.items = [{name:'mango',type:'fruit'},{name:'cat',type:'animal'},{name:'dog',type:'animal'},{name:'monkey',type:'animal'},{name:'orange',type:'fruit'},{name:'banana',type:'fruit'},...]
  </code></pre>
  
  <p>Then I Have a array of colors like</p>
  
  <pre><code>$scope.colorSeries = ['#3366cc', '#dc3912', '#ff9900',...];
  
  $scope.setBGColor = function (index) {
     return { background: $scope.colorSeries[index] }
  }
  </code></pre>
  
  <p>I am using the items array to render the fruits only in a div with background color selected from the colorSeries based on the index like colorSeries[0] which will give me #3366cc</p>
  
  <pre><code>&lt;div data-ng-repeat="item in items " ng-if="item.type =='fruit'"&gt;
     &lt;label ng-style="setBGColor($index)"&gt;{{item.name}}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Things working fine if the length of the items array is less than length of <code>colorSeries</code> array.The problem arises if the length of <code>colorSeries</code> array is less than the items array.e.g if i have a color series with 3 colors then for this items array the last item i.e orange will need a color indexed as <code>colorSeries[4]</code> which is <code>undefined</code> where as I have rendered only three items. So, is it possible to get the index like 0,1,2 i.e the index of elements rendered with <code>ng-if</code>.</p>