title: Close nested UI Bootstrap accordion when parent closes
body: <p>In AngularJS I am using a bootstrapUI accordion directive that contains a nested accordion in one of the panes. </p>
  
  <p>When I close the 'parent' I would like to close its 'children'. I am having trouble because the accordion directive uses transclusion, and the scopes are actually siblings not parent to child.</p>
  
  <pre><code>&lt;div ng-controller="AccordionDemoCtrl"&gt; 
    &lt;accordion close-others="oneAtATime"&gt;
      &lt;accordion-group heading="Static Header"&gt;
        This content is straight in the template.
      &lt;/accordion-group&gt;
      &lt;accordion-group heading="{{group.title}}" ng-repeat="group in groups"&gt;
        {{group.content}}
      &lt;/accordion-group&gt;
      &lt;accordion-group heading="Nested Accordian"&gt;
          &lt;accordion close-others="oneAtATime"&gt;
            &lt;accordion-group heading="Static Header"&gt;
              This content is straight in the template.
            &lt;/accordion-group&gt;
            &lt;accordion-group heading="{{group.title}}" ng-repeat="group in groups"&gt;
              {{group.content}}
            &lt;/accordion-group&gt;
          &lt;/accordion&gt;
      &lt;/accordion-group&gt;
    &lt;/accordion&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><a href="http://plnkr.co/edit/1vDhTG?p=preview" rel="nofollow">Plunker demo</a></strong></p>