title: How do you Bind to Angular-UI's Carousel Slide Events?
body: <p>I'm using Angular-UI's carousel and I need to tell my google charts to redraw after they have slid into view. In spite of what I've read, I can't seem to hook into the event. </p>
  
  <p>See my attempt:
  <a href="http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview" rel="noreferrer">http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;carousel id="myC" interval="myInterval"&gt;
    &lt;slide ng-repeat="slide in slides" active="slide.active"&gt;
      &lt;img ng-src="{{slide.image}}" style="margin:auto;"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h4&gt;Slide {{$index}}&lt;/h4&gt;
        &lt;p&gt;{{slide.text}}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/slide&gt;
  &lt;/carousel&gt;
  </code></pre>
  
  <p>On document load:</p>
  
  <pre><code>$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );
  </code></pre>
  
  <p>It should work something like this:
  <a href="http://jsfiddle.net/9fwuq/" rel="noreferrer">http://jsfiddle.net/9fwuq/</a> - non-angular-ui carousel</p>
  
  <p>Perhaps there is a more Angular way to hook into the fact that my chart has slid into view?</p>