Question: How would I use AngularJS `ng-repeat` to display the following HTML (Twitter Bootstrap Scaffolding)? Essentially, every third record I need to close the `</div>`, print an `<hr>`, then open another `<div class="span4">` 

```
    <div class="row">
      <div class="span4">
        <h3>
          Project A
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project B
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project C
        </h3>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="span4">
        <h3>
          Project D
        </h3>
      </div>
      <div class="span4">
        <h3>
          Lab Title
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project E
        </h3>
      </div>
    </div>

```

I've created a fiddle for code demos.  

<http://jsfiddle.net/ADukg/261/>

Answer: 
Moving on from [the more easy answer](https://stackoverflow.com/a/11058532/1447384). I dislike the original solution because of the empty dom elements it produces. This is for 3 divs per row.

```
<div ng-controller="ModulesCtrl">
    <div class="row" ng-repeat="i in fields.range()">
        <div class="span4" ng-repeat="field in fields.slice(i,i+3)">
            <h2>{{field}}</h2>
        </div>
    </div>
</div>

```

In function FieldsCtrl($scope):

```
$scope.fields.range = function() {
    var range = [];
    for( var i = 0; i < $scope.fields.length; i = i + 3 )
        range.push(i);
    return range;
}

```

If you know fields.length you can in place of fields.range() use [0,3,6,9] etc
To keep view logic out of the controller and have a more re-usable solution, you can create a custom filter that splits the array into row groups:

```
angular.module('app').filter('group', function() {
    /**
     * splits an array into groups of the given size
     * e.g. ([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]
     */
    return function(array, groupSize) {
        return _.groupBy(array, function(val, index) {
            return Math.floor(index / groupSize);
        });
    };
});

```

And in the view:

```
<div class="row" ng-repeat="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>

```

To include the hr you can use the ng-repeat start and end points:

```
<div class="row" ng-repeat-start="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>
<hr ng-repeat-end />

```