AngularJS Accordion Example with Twitter Bootstrap

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" />
    <script src="accordion.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <a href="#/">Home</a>
    <div ng-view></div>
  </body>

</html>

var app = angular.module('angularjs-starter', ["ui.bootstrap.accordion"]);

app.config(function ($routeProvider) {
  $routeProvider.
    when("/", {templateUrl: "home.part"}).
    when("/accordion", {templateUrl: "accordion.part"});
});

app.controller('MainCtrl', function($scope) {
  $scope.sections = [
    {title: "Secion 1", text: "This is a section."},
    {title: "Secion 2", text: "This is another section."},
    {title: "Secion 3", text: "Last but not least, another section."}
  ];
});

angular.module('ui.bootstrap.accordion', []);
angular.module('ui.bootstrap.accordion').controller('AccordionController', ['$scope', function ($scope) {

  var groups = $scope.groups = [];

  this.select = function(group) {
    angular.forEach(groups, function (group) {
      group.selected = false;
    });
    group.selected = true;
  };

  this.toggle = function(group) {
    if (group.selected) {
      group.selected = false;
    } else {
      this.select(group);
    }
  };

  this.addGroup = function(group) {
    groups.push(group);
    if(group.selected) {
      this.select(group);
    }
  };

  this.removeGroup = function(group) {
    groups.splice(groups.indexOf(group), 1);
  };

}]);

/* accordion: Bootstrap accordion implementation
 * @example
 <accordion>
   <accordion-group title="sth">Static content</accordion-group>
   <accordion-group title="sth">Static content - is it? {{sth}}</accordion-group>
   <accordion-group title="group.title" ng-repeat="group in groups">{{group.content}}</accordion-group>
 </accordion>
 */
angular.module('ui.bootstrap.accordion').directive('accordion', function () {
  return {
    restrict:'E',
    transclude:true,
    scope:{},
    controller:'AccordionController',
    template:'<div class="accordion" ng-transclude></div>'
  };
});

angular.module('ui.bootstrap.accordion').directive('accordionGroup', function () {
  return {
    require:'^accordion',
    restrict:'E',
    transclude:true,
    scope:{
      title:'='
    },
    link: function(scope, element, attrs, accordionCtrl) {

      accordionCtrl.addGroup(scope);

      scope.select = function() {
        accordionCtrl.select(scope);
      };

      scope.toggle = function() {
        accordionCtrl.toggle(scope);
      };

      scope.$on('$destroy', function (event) {
        accordionCtrl.removeGroup(scope);
      });
    },
    template:'<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" ng-click="toggle()">{{title}}</a></div><div class="accordion-body collapse" ng-class="{in : selected}"><div class="accordion-inner" ng-transclude></div></div></div>',
    replace:true
  };
});

<h1>Welcome!</h1>
<a href="#/accordion">Open accordion</a>

<accordion>
  <accordion-group title="section.title" ng-repeat="section in sections">{{section.text}}</accordion-group>
</accordion>

/* CSS goes here */
body {
  margin: 24px;
}