angular bootstrap

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.min.js"></script>
<div ng-controller="AccordionDemoCtrl" class="container">
    <label class="checkbox">
        <input type="checkbox" ng-model="oneAtATime" />Open only one at a time</label>
        <div class="row">
         <accordion close-others="oneAtATime">
             <div class="col-xs-4" ng-repeat="rows in groups">
               <accordion-group heading="{{group.title}}"  ng-repeat="group in rows">{{group.content}}</accordion-group>
             </div>
      </accordion>
        </div>
   
</div>

JavaScript

var app = angular.module('myapp', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
    function divisecols(arr, size) {
      var newArr = [];
      var colsLength = Math.ceil(arr.length/size);
      for (var i=0; i<arr.length; i+=colsLength) {
        newArr.push(arr.slice(i, i+colsLength));
      }
      return newArr;
    }
    $scope.oneAtATime = false;

    groups = [{
        title: "Dynamic 1",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic  2",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic 3",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic 4",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic 5",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic Group Header - 6",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic Group Header - 7",
        content: "Dynamic Group Body - 1"
    },{
        title: "Dynamic 8 1",
        content: "Dynamic Group Body - 1"
    },{
        title: "Group Header - 9",
        content: "Dynamic Group Body - 1"
    },{
        title: " Header - 10",
        content: "Dynamic Group Body - 1"
    }, {
        title: " Group  - 11",
        content: "Dynamic Group Body - 2"
    }];
		$scope.groups = divisecols(groups, 3);
    console.log($scope.groups);
    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

    $scope.addItem = function () {
        var newItemNo = $scope.items.length + 1;
        $scope.items.push('Item ' + newItemNo);
    };
}