simple accordion using AngularJS

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
      <accordion-heading>
                some text here, on the left side of the header.
                
                <div class="pull-right">
                  <span>1st info</span>
                  <span>2nd info</span>
                  <span>maybe 3rd?</span>
                </div>                
      </accordion-heading>
      This is just some content to illustrate fancy headings.
    </accordion-group>    
  </accordion>
</div>
  </body>
</html>

angular.module('plunker', ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {

  $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Dynamic Group Body - 1",
      open: false
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Dynamic Group Body - 2",
      open: false
    }
  ];
  
  $scope.addNew = function() {
    $scope.groups.push({
      title: "New One Created",
      content: "Dynamically added new one",
      open: false
    });
  }
  
}