JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<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>

JavaScript

// Define a module
var app = angular.module('app', [ ]);

// Define a conroller.
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"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];
   
    
}]);