UI-Bootstrap Carousel won't cooperate with my Angular App. Why?

Question

I've tried everything. It's like nothing I do can get this damn carousel working. It's bringing in the proper data from the controller, but it doesn't format it like a carousel -- everything's showing and the words are stacked on top of each other.

Here are my angular app dependencies:

var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngAnimate', 'ngTouch'])

Here's my markup:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/home.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<link rel="stylesheet" href="bower_componenets/angular-bootstrap/ui-bootstrap-csp.css">
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css">

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-carousel/dist/angular-carousel.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/homeController.js"></script>

...

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <uib-carousel class="carousel-inner" role="listbox">
  <uib-slide ng-repeat="slide in slides" ng-class="{active : $first}">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h1>{{slide.headline}}</h1>
      <p>{{slide.byline}} on {{slide.date}}</p>
      <h3>{{slide.publication}}</h3>
    </div>
  </uib-slide>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"  ng-non-bindable>
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"  ng-non-bindable>
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </uib-carousel>
</div>

I just don't get it. Even when I discarded doing this with ng-repeat and hardcoded all the data directly into the markup, the arrows still were all glitchy and went backwards or would get stuck on the second slide. I don't know, maybe there's something wrong with my dependencies. Whatever the case, it's frustrating as hell not being able to get such a "simple" component working.

Thanks in advance,

Peter

Answer 1

The uib-carousel syntax (notice the uib- prefix), has been introduced in angular ui-bootstrap 0.14.0, but the version you have is 0.13.4, where the directive is named carousel, i.e. without prefix.

Either upgrade to 0.14, or if you stay in 0.13, removing the uib- prefix will do the trick.

Replace:

    <uib-carousel ...>
        <uib-slide ...>
           <!-- ... -->
        </uib-slide>  
    </uib-carousel>

with:

    <carousel ...>
        <slide ...>
           <!-- ... -->
        </slide>  
    </carousel>

As a side note, remove angular-carousel.(js|css) from the dependencies, as it is another carousel solution, but you are obviously using the ui-bootstrap one.

Answer 2

The answer of Michael P. Bazos does resolve your problem, but you shouldn't go that way, because it is the deprecated API.

The developers of Angular-Bootstrap decided to add a prefix (uib) to their directives and also to their angular controllers in version 0.14. Since the release, the official documentation contains only the uib-prefixed version. If you use an old version of angular-bootstrap in your project, the current documentation will not work for obvious reasons.

Therefore: Update your angular-bootstrap to the most current version (as of today, 2015-10-12, it is 0.14.1) and it will work. The solution of Michael is deprecated.

Answer 3

Here You can find working demo: https://plnkr.co/edit/PrM5PSkUHJ3l8mwXMFZQ?p=preview

Since 30 March 2016 (seems to be AngularUI 1.3.0), uib-carousel and uib-slide directives have restrict: 'A' clause, which means they should be defined as element's attribute. This example can be found on AngularUI homepage:

<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        ...
    </div>
</div>

What is more, it seems that You mess Bootstrap' carousel with AngularUI' carousel.