Grouping filter for AngularJS

I wanted to create a bootstrap layout with multiple rows and columns through AngularJS. In order to do that, every six items or so a new row would have to be created, containing the next six list items.

This of course requires slicing the list into groups of six and iterating over those groups at the row level. My idea was then to implement a grouping filter, that could be used as follows:

<div class="row" ng-repeat="group in items | inSlicesOf:6">
  <div class="col-xs-6 col-md-2" ng-repeat="item in group">
    ...
  </div>
</div>

After some not-quite-working experimentation and a (to me) somewhat obscure error
Error: 10 $digest() iterations reached. Aborting!
I stumbled upon a snippet, that does exactly what I need:

myModule.filter('inSlicesOf', function($rootScope) {
  return function(items, count) {
    if (!count) {
      count = 1;
    }

    if (!angular.isArray(items) && !angular.isString(items)) {
      return items;
    }

    var array = _.groupBy(items, function(val, index) {
      return Math.floor(index / count);
    });

    if (angular.equals($rootScope.arrayinSliceOf, array)) {
      return $rootScope.arrayinSliceOf;
    } else {
      $rootScope.arrayinSliceOf = array;
    }

    return array;
  };
});

(Note that this requires Underscore.js)

Contact

Alexander Gitter
contact at agitter net