title: Angular UI Accordion
body: <p>I'm trying to find out how to watch Angular UI's accordion <code>is-open</code> event so I can have a call back when ever any of my accordions are closed.</p>
  
  <p>This is the basic structure of my accordion's (refined just to show one.)<br>
  One thing to note is that these are actually static content, nothings dynamic.</p>
  
  <pre><code>&lt;accordion-group is-open="true"&gt;
  
    &lt;accordion-heading&gt;
      &lt;h3&gt;Some Header&lt;/h3&gt;
    &lt;/accordion-heading&gt;
  
    &lt;h4&gt;Some pretty awesome content!&lt;/h4&gt;
  &lt;/accordion-group&gt;
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>.controller('AccordionDemoCtrl', function ($scope) {
    $scope.oneAtATime = true;    
    $scope.$watch('groups[0].open', function (isOpen) {    
      if (!isOpen) {    
        console.log('First group was opened');    
      }
    });  
  });
  </code></pre>
  
  <p><strong><a href="http://plnkr.co/edit/teiTTl?p=preview" rel="nofollow">Heres a demo</a></strong>
  I'm getting the <code>console.log</code> to fire once upon load, but not when I close any other accordions. 
  Any ideas? Any help is appreciated. </p>