angularjs and bootstrap javascript

Question

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

Answer 1

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

Answer 2

No, it's not the right way. Do not do any DOM modifications inside the controller, ever. There are no exceptions on that. It's just bad practise.

What you want to do is use directives.

Here is the link to help you get started: http://docs.angularjs.org/guide/directive

Answer 3

Seeing as you put me on the right course to fix my issue I had, below is my directive and the html

angular.module('portal.directives', [])
    .directive('bootCarousel', function(){
        return function(scope, elem, attrs) {
            scope.carouselPrev = function(){
                $('#'+attrs.id).carousel('prev');
            }

            scope.carouselNext = function(){
                $('#'+attrs.id).carousel('next');   
            }
        }
    });

Html:

<div id="carousel-generic" class="carousel slide"  data-slide="cycle"  boot-carousel>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-generic" data-slide-to="{{$index}}" ng-class="{'active': $index == 0, '': $index != 0}" ng-repeat="banner in banners"></li>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div ng-class="{'item active': $index == 0, 'item': $index != 0}" style="height: 340px; background: #c33"  ng-repeat="banner in banners">
            <div ng-bind-html-unsafe="banner.sContent"></div>
            <div class="carousel-caption">

            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" ng-click="carouselPrev()" href="" data-slide="prev">
        <img src="images/Portal_header_arrowL.png" alt="Previous">
    </a>
    <a class="right carousel-control" ng-click="carouselNext()" href="" data-slide="next">
        <img src="images/Portal_header_arrowR.png" alt="Next">
    </a>

Answer 4

I fixed the bug changing href by data-target

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