Bootstrap data-slide property conflicts with angularJS

Question

I am using tweeter bootstrap side by side my angular project, using data-slide property for tweeter carousel:

        <a class="carousel-control left" href="#masthead-carousel" data-slide="prev"><i class="fa fa-reply"></i></a>

causes angularJS error in Browser console

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=carousel&p1=slide
    at Error (native)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:6:450
    at D (http://localhost:9000/assets/js/angular/1.2/angular.min.js:51:80)
    at N (http://localhost:9000/assets/js/angular/1.2/angular.min.js:54:128)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:60:280
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:71:373
    at l.promise.then.D (http://localhost:9000/assets/js/angular/1.2/angular.min.js:99:263)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:100:417
    at h.$get.h.$eval (http://localhost:9000/assets/js/angular/1.2/angular.min.js:111:121)
    at h.$get.h.$digest (http://localhost:9000/assets/js/angular/1.2/angular.min.js:108:200) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="carousel-control left item text-center ng-isolate-scope" ng-transclude="" href="#masthead-carousel" data-slide="prev"> 

How can I resolve this conflicts between tweeter bootstrap and angularJS

Answer 1

Try add target="_self" in the a tag, angularjs will ignore links with target attribute

<a class="carousel-control left" href="#masthead-carousel" target="_self" data-slide="prev"><i class="fa fa-reply"></i></a>

Answer 2

data-slide is used by both Bootstrap and ui.bootstrap so there is a conflict here. To ignore angular apply.To do that insert ng-non-bindable into the appropriate Dom element.