html - How to use bootstrap accordian with AngularJS? -

how can create bootstrap accordion using angularjs , have implemented ui-bootstrap accordion not working. new angularjs appreciated. can not use jsfiddle/plunker.

so far tried code....

boot.html

    <accordion close-others="false">             <accordion-group heading="process rating" is-open="open.processrating">                 <accordion-heading>                     <small>process rating<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': open.processrating, 'glyphicon-chevron-right': !status.ismetricbaseopen}"></i></small>                 </accordion-heading>       <div class="panel-body">         <div role="tabpanel">             <ul class="nav nav-tabs" role="tablist">                 <li role="presentation" class="active"><a href="#home"                     aria-controls="home" role="tab" data-toggle="tab">line of                         business ratings</a></li>                 <li role="presentation"><a href="#profile"                     aria-controls="profile" role="tab" data-toggle="tab">compliance                         rating</a></li>             </ul>             <div class="tab-content">                 <div role="tabpanel" class="tab-pane active" id="home">                     <form class="form-horizontal" role="form">                             <div class="panel-footer">                                 <strong>inherent risk ratings</strong>                                     <button require-control-point="prt_add"                                         class="btn btn-default pull-right " type="button"                                         ng-click="gotoqstnpage(1)" ng-disabled="disableriskratingbtn">create                                         inherent risk rating</button>                             </div>                         <div kendo-grid="ihtrskratinggrid"                             options="ihtrskratinggridoptions"></div>                         <div class="panel-footer">                         <strong>process ratings</strong>                         </div>                         <div kendo-grid="processratinggrid"                             options="processratinggridoptions">                             <div kendo-window="processratingwin" options="prtwinoptions"                                 k-modal="true"></div>                         </div>                     </form>                 </div>             </div>         </div>  </div>         </accordion-group>     </accordion> 

this may angularjs accordion sample. go , view edit in plunker example

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('accordiondemoctrl', function   ($scope) { $scope.oneatatime = true;  $scope.groups = [ {   title: 'dynamic group header - 1',   content: 'dynamic group body - 1' }, {   title: 'dynamic group header - 2',   content: 'dynamic group body - 2' } ];  $scope.items = ['item 1', 'item 2', 'item 3'];  $scope.additem = function() { var newitemno = $scope.items.length + 1; $scope.items.push('item ' + newitemno); };  $scope.status = { isfirstopen: true, isfirstdisabled: false }; });