title: What's a good way to control an angular-ui accordion programmatically?
body: <p>I am using the accordion directive from <a href="http://angular-ui.github.com/bootstrap/">http://angular-ui.github.com/bootstrap/</a> and I need to have more control over when the accordions open and close.</p>
  
  <p>To be more precise I need a button inside the accordion-group that will close its parent accordion and open the next one (so basically mimic what clicking the next header would do if close-others was set to true).
  I also need to do some validation before I can allow an accordion to be closed and the next one to be opened, and I also need to wire this up to click events on the accordion headers.</p>
  
  <p>I am pretty new to angular and we're currently rewriting an application from Backbone+JQuery to Angular. In the Backbone-version we were using Twitter Bootstrap accordions and we were opening and closing them using JQuery. While we can still keep doing this I would rather get rid of JQuery DOM manipulation completely so I am looking for a pure angular solution to this.</p>
  
  <p>What I've tried to do in terms of validation is</p>
  
  <pre><code>&lt;accordion-group ng-click="close($event)"&gt;
  </code></pre>
  
  <p>and in my controller</p>
  
  <pre><code>    event.preventDefault();
      event.stopPropagation();
  </code></pre>
  
  <p>This obviously did not work as the DOM element is replaced by the directive and the click-handler is never added. I've been going over the source code (and found a few very nice undocumented features) but I'm at a loss over where to even begin solving this specific challenge. I was considering forking angular-ui and try to add this functionality to the accordion directive but if I can achieve this without modifying the directive that would be a lot nicer. </p>