Groups of items using nested ng-repeat

Shows how to chunk up a set of items by pre-grouping in the controller and then using nested repeaters.

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div class="container" data-ng-controller="groupedItemsCtrl">
    <div>
        <input type="text" ng-model='maxTypes' type="number" />
    </div>
    <div data-ng-repeat="group in groups" class="btn-group list-group-item-text" data-toggle="buttons">
        <label title="{{type.name}}" data-ng-repeat="type in group" class="truncate" ng-class="{btn: true, 'btn-primary': true, active: Map[type.id]}">
            <input type="checkbox" ng-model="Map[type.id]" />{{type.name}}</label>
    </div>
</div>

CSS

.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

(function () {
    angular.element(document).ready(function () {
        var module = angular.module('demo', []);

        module.controller('groupedItemsCtrl', function ($scope, $log) {

            var types = [],
                maxTypes = 5,
                groups = [],
                maxGroupSize = 4,
                groupNum = 0;

            $scope.$watch('maxTypes', function (newVal, oldVal) {
                if (angular.isString(newVal)) {
                    newVal = parseInt(newVal, 10);
                }

                if (isNaN(newVal)) {
                        newVal = 0;
                    }
                
                maxTypes = newVal;

                $log.log({
                    newVal: newVal,
                    oldVal: oldVal
                });

                types.splice(0, types.length);
                groups.splice(0, groups.length);

                for (var typeNum = 0; typeNum < maxTypes; typeNum++) {
                    types.push({
                        id: typeNum,
                        name: 'type-with-long-name' + typeNum
                    });
                }

                groups.push([]);
                groupNum = 0;

                for (var i = 0; i < types.length; i++) {
                    groups[groupNum].push(types[i]);

                    if (groups[groupNum].length === maxGroupSize) {
                        groups.push([]);
                        groupNum++;
                    }
                }


            });

            $scope.maxTypes = maxTypes;
            $scope.groups = groups;
        });

        angular.bootstrap(document, ['demo']);
    });


}());