Angular ng-repeat add bootstrap row every 3 or 4 cols

The top voted answer, while effective, is not what I would consider to be the angular way, nor is it using bootstrap's own classes that are meant to deal with this situation. As @claies mentioned, the .clearfix class is meant for situations such as these. In my opinion, the cleanest implementation is as follows:

<div class="row">    <div ng-repeat="product in products">        <div class="clearfix" ng-if="$index % 3 == 0"></div>        <div class="col-sm-4">            <h2>{{product.title}}</h2>        </div>    </div></div>

This structure avoids messy indexing of the products array, allows for clean dot notation, and makes use of the clearfix class for its intended purpose.

I know it's a bit late but it still might help someone. I did it like this:

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">    <div class="col-xs-4">{{products[$index]}}</div>    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div></div>

jsfiddle

Okay, this solution is far simpler than the ones already here, and allows different column widths for different device widths.

<div class="row">    <div ng-repeat="image in images">        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">            ... your content here ...        </div>        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>    </div></div>

Note that the % 6 part is supposed to equal the number of resulting columns. So if on the column element you have the class col-lg-2 there will be 6 columns, so use ... % 6.

This technique (excluding the ng-if) is actually documented here: Bootstrap docs