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

All we need is an easy explanation of the problem, so here it is.

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="nofollow noreferrer noopener" rel="stylesheet">  <link rel="stylesheet" href="style/main.css" rel="nofollow noreferrer noopener">
<link rel="stylesheet" href="style/home.css" rel="nofollow noreferrer noopener">
<link rel="stylesheet" href="bower_components/animate.css/animate.css" rel="nofollow noreferrer noopener">
<link rel="stylesheet" href="bower_componenets/angular-bootstrap/ui-bootstrap-csp.css" rel="nofollow noreferrer noopener">
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css" rel="nofollow noreferrer noopener">

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://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>
  <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">
      <p>{{slide.byline}} on {{slide.date}}</p>
    <a class="left carousel-control" href="#myCarousel" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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 class="right carousel-control" href="#myCarousel" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" role="button" data-slide="next"  ng-non-bindable>
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>

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,


How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.


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


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

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.

Method 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.

Method 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">

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply