angularjs - checkbox ng-repeat format in columns -

i want able align multiple checkboxes in columns checkboxes created ng-repeat.

here plunker example code not want. ideally variable used number of columns

here stackoverflow example example without ng-repeat

sample code

  $scope.radii = [     {id:.25, name:"1/4 mile"},     {id:.5, name:"1/2 mile"},     {id:1, name:"1 mile"},     {id:2, name:"2 mile"},     {id:3, name:"3 mile"},     {id:4, name:"4 mile"},     {id:5, name:"5 mile"}   ];    // selected value {id:2, name:"2 mile"}   $scope.selectedradius = $scope.radii[3];  }); 

  <label class="checkbox" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">     <input type="checkbox" name="radius"          ng-model="$parent.selectedradius"          ng-value="radius">      {{radius.name}}    </label> 

you can align using bootstrap! check index , divide row elements,

here code,

html:

<div   ng-controller="grokcontroller"   class="container">     <div ng-repeat="radius in radii" ng-if="$index % 3 == 0" class="row">         <div class="col-xs-4"><input type="checkbox"                  ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>         <div class="col-xs-4"><input type="checkbox"                  ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>         <div class="col-xs-4"><input type="checkbox"                  ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>     </div> </div> 

controller:

app.controller('grokcontroller', ['$scope', function($scope) {        $scope.radii = [     {id:.25, name:"1/4 mile"},     {id:.5, name:"1/2 mile"},     {id:1, name:"1 mile"},     {id:2, name:"2 mile"},     {id:3, name:"3 mile"},     {id:4, name:"4 mile"},     {id:5, name:"5 mile"}   ];  }]); 

working app