title: Checkbox in header for angular-ui bootstrap accordion directive
body: <p>I'm still pretty new to angular, so this may be a basic question, but I haven't been able to figure it out yet.</p>
  
  <p>How do I put a checkbox (bound to a property of my model) into a header for an angular-ui accordion? I can get the checkbox in there, but the click never seems to get to it, i.e., it never gets "checked".</p>
  
  <pre><code>&lt;accordion&gt;
    &lt;accordion-group ng-repeat="group in groups" is-open="group.open"&gt;
      &lt;accordion-heading&gt;
        &lt;input 
            type="checkbox" 
            ng-model="group.checked" 
            ng-click="checkboxClick(group, $event)" /&gt;
        Title
      &lt;/accordion-heading&gt;
      {{group.content}}
    &lt;/accordion-group&gt;    
  &lt;/accordion&gt;
  </code></pre>
  
  <p>According to this <a href="https://stackoverflow.com/questions/7426425/jqueryui-accordion-question">jQueryUI accordion with checkboxes</a>, I can get something like the desired behavior with the standard jquery-ui accordion by calling <code>e.preventDefault()</code> on the click event, but that doesn't seem to work with the angular-ui accordion directive.</p>
  
  <p>See this plunker here: <a href="http://plnkr.co/edit/QMnaXJeMagrTPRjbIZbL?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/QMnaXJeMagrTPRjbIZbL?p=preview</a>.</p>