angular bootstrap

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="AccordionDemoCtrl">

    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group ng-repeat="group in groups" is-open="isOpen">
                      <uib-accordion-heading>
                    <div class="text-center">
                        <strong>{{group.title}}</strong>
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                    </div>
                </uib-accordion-heading>
      {{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</div>

JavaScript

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

app.controller('AccordionDemoCtrl', function($scope) {
  $scope.groups = [{
    title: "Dynamic Group Header - 1",
    content: "Dynamic Group Body - 1"
  }, {
    title: "Dynamic Group Header - 2",
    content: "Dynamic Group Body - 2"
  }, {
    title: "Dynamic Group Header - 3",
    content: "Dynamic Group Body - 3"
  }];
});