using ui.bootstrap causing issues with carousel

Question

I am having issues with getting the carousel working properly. I used yeomen to scaffold the angular app. I am getting this error

Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <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="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <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="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

here is my html file

 <style>
            #slides_control > div{
                height: 200px;
            }
            img{
                margin:auto;
                width: 400px;
            }
            #slides_control {
                position:absolute;
                width: 400px;
                left:50%;
                top:20px;
                margin-left:-200px;
            }
            .carousel-control.right {
                background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%) !important;
            }
            .carousel-control.left {
                background-image: linear-gradient(to right, rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%) !important;
            }
        </style>
<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

my controller is

'use strict';

angular.module('myhApp') .controller('MainCtrl', function ($scope) { });

here is my app.js

angular
  .module('myhApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

I am not sure whats causing it. Any help will be appreciated.

** Some findings recently **

ok I did some digging around and found out that I have to have carousel in the dom for directive (as the error indicates). When I add carousel, the error goes away but my carousel doesnt work anymore and looks wonky as well.

Here is the change that I made to html

<div id="Carousel" class="carousel slide" carousel>

here is how it looks and you can see there is an extra arrow in the cats face. I am not sure whats going..any help will be apprecitaed

Answer 1

When building with angular forget bootstrap's javascript.Use only the css.Especially when using ngRoute.It reads the hashes from url amongst other things.For carousels, use ui.bootstrap.carousel, read the doc and see the example shown on the page.It's simple and concise.Otherwise there will always be an error in the console, that is if the carousel works.

Answer 2

I was able to solve the conflict by adding the ng-non-bindable to the elements that have the data-slide directive. see below:

  <a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control">‹</a>

Answer 3

I have the same problem and I don't know why but if you delete in your HTML data-slide="prev" and data-slide="next" the error disappears.

Answer 4

As per gooseman's answer on SO:

angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
}]).directive('carousel', [function() { 
    return { }
}]);

Answer 5

data-slide is used by both Bootstrap and ui.bootstrap so there is a conflict here. If you want to use the plain Bootstrap carousel method you can tell angular to ignore a DOM element and it's children.

To do that insert ngNonBindable into the appropriate Dom element.

Answer 6

Just remove ui.bootstrap from the list of modules if you don't need it.