$index inside ng-repeat with ng-if - angularjs

Question

I Have an array of items like this which contains a list of animals and a list of fruits in a random order.
$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'},...]
Then I Have a array of colors like
$scope.colorSeries = ['#3366cc', '#dc3912', '#ff9900',...];
$scope.setBGColor = function (index) {
return { background: $scope.colorSeries[index] }
}
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
<div data-ng-repeat="item in items " ng-if="item.type =='fruit'">
<label ng-style="setBGColor($index)">{{item.name}}</label>
</div>
Things working fine if the length of the items array is less than length of colorSeries array.The problem arises if the length of colorSeries 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 colorSeries[4] which is undefined 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 ng-if.

Answer 1

Instead of using ng-if, I would use a filter. then, the $index will be always correspond to the index in the result list after applying the filter
<div data-ng-repeat="item in items|filterFruit">
<label ng-style="setBGColor($index)">{{item.name}}</label>
</div>
angular.module('app.filters', []).filter('filterFruit', [function () {
return function (fruits) {
var i;
var tempfruits = [];
var thefruit;
if (angular.isDefined(fruits) &&
fruits.length > 0) {
for(thefruit = fruits[i=0]; i<fruits.length; thefruit=fruits[++i]) {
if(thefruit.type =='fruit')
tempfruits.push(thefruit);
}
}
return tempfruits;
};
}]);

Answer 2

Try this..
this.itemList = [{
name:'apple'
}, {
name: 'fruit'
}];
this.colorlist = [{ color: 'red' }, { color: 'orange' }, { color: 'blue' }];
<div data-ng-repeat="item in itemList " ng-if="item.name=='fruit'">
<label ng-style="colorlist [$index]">{{item.name}}</label>
</div>

Answer 3

If I were you, I would embed the colors inside the $scope.items objects, since you always use them coupled with a fruit.
Anyway, to address your specific code configuration, I would add a counter in my controller and use it to loop through the colors.
Something like this:
app.controller('myCtrl', function ($scope) {
$scope.colorSeries = ['#3366cc', '#dc3912', '#ff9900',...];
var colorCounter = $scope.colorSeries.length;
var colorIdx = -1;
$scope.setBGColor = function () {
// get back to the first color if you finished the loop
colorIdx = colorCounter? 0: colorIdx+1
return { background: $scope.colorSeries[colorIdx] }
}
})
And then in your view (note that there is no $index)
<div data-ng-repeat="item in items " ng-if="item.type =='fruit'">
<label ng-style="setBGColor()">{{item.name}}</label>
</div>