How do you Bind to Angular-UI's Carousel Slide Events?

Question

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 e

Answer 1

Following the answer given by runTarm If you want to know the index of the next slide, you should add something like this:

 .directive('onCarouselChange', function ($parse) {
    return {
      require: 'carousel',
          link: function (scope, element, attrs, carouselCtrl) {
            var fn = $parse(attrs.onCarouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function (nextSlide, direction,nextIndex) {
      if (nextSlide !== this.currentSlide) {
        fn(scope, {
          nextSlide: nextSlide,
          direction: direction,
          nextIndex:this.indexOfSlide(nextSlide)
        });
      }
      return origSelect.apply(this, arguments);
    };
  }
  };
})

Then, in the controller you just need to do this to catch the new index:

$scope.onSlideChanged = function (nextSlide, direction, nextIndex) {
    console.log(nextIndex);
}