title: Angularjs Accordion
body: <p>How to expand accordion panel on button click function?</p>
  
  <p>this is my HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="AccordionDemoCtrl"&gt;
    &lt;accordion&gt;
      &lt;accordion-group ng-repeat="group in groups"  is-open="heading1.isOpen"&gt;
        &lt;accordion-heading&gt;
          &lt;span ng-click="opened(group, $index)"&gt;{{group.title}}&lt;/span&gt;
        &lt;/accordion-heading&gt;
        {{group.content}}
      &lt;/accordion-group&gt;    
      &lt;button class="btn btn-default btn-sm" ng-click="heading1.isOpen = !heading1.isOpen"&gt;Toggle 1&lt;/button&gt;
    &lt;/accordion&gt;  
  
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>example.js:</p>
  
  <pre><code>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
      }
    ];
  }
  </code></pre>
  
  <p>Using AngularJS, angular-ui and Twitter Bootstrap, is it possible to make the single accordion expand form ng repeat?
  when i create ng-repeat button click is not working.</p>