Add item after each ng-repeat

Question

I use ng-repeat, but I would like to add an element after every 4th repeated element.

repeating div:

<div class="product" ng-repeat="product in productList" ng-init="addFullScreenProduct($index, this)">

and then in my controller:

$scope.addFullScreenProduct = function(index, event)
{
        var currentProduct = "<div id='" + (index/4) + "' class='currentProduct sixteen columns'></div>";
        var product = event.srcElement;
        currentProduct = $compile(currentProduct)($scope);
        product.after(currentProduct);
};

I cannot add the element "currentProduct" which will be added after the element "product".

My desired conclusion:

<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>

Any ideas?

Answer 1

You can use ng-repeat-startand ng-repeat-end, for example:

<div ng-repeat-start="product in productList" class="product">
    {{ product }}
</div>
<div ng-repeat-end ng-if="$index % 4 == 0" class="currentproduct sixteen columns"></div>

div.productwill be repeated, and div.currentproductwill be present at every fourth iteration.

Answer 2

You can use filters to display every fourth element. For instance:

<div class="product" ng-repeat="product in productList" ng-show="$index % 4 == 0"></div>