Bootstrap carousel not working with angularjs

Question

I want to use bootstrap carousel along with angular js to display images in carousel content. But, when the navigation links clicked, it displays blank page.

My code

Answer 1

As mentioned, the issue is with AngularJS and ngRoute intercepting the a-link clicks. I had this problem but did not want to use Angular UI Bootstrap (as described in other answers).

So, I changed the .carousel-control elements from links (a tags) to spans.

Then, I added an event handler as follows...

  $('.carousel').carousel({
                interval: 5000,
                pause: "hover",
                wrap: true
            })
            .on('click', '.carousel-control', handle_nav);

  var handle_nav = function(e) {
        e.preventDefault();
        var nav = $(this);
        nav.parents('.carousel').carousel(nav.data('slide'));
  }

Hope this helps...