angularjs and bootstrap javascript

Question

I have a twitter bootstrap carousel in an angular app. If I use the data-slide attribute thus:

<a data-slide="prev" href="#myCarousel" class="left carousel-control">&lsaquo;</a>

then the href=#myCarousel in interpreted as a route and the current page is reloaded. (I am using HTML5 mode)

I can get carousel working by replacing with this:

<a href="#" class="left carousel-control" ng-click="carouselPrev()">&lsaquo;</a>

and in the controller:

$scope.carouselPrev = function(){
    $('#myCarousel').carousel('prev');
};

but what is the right way to do this?

Answer 1

Or...use this: Angular-UI - Bootstrap (includes a carousel directive.)