How do I make the carousel indicators in angular ui use thumbnails from a model in a controller?

Question

I'm using the angular ui bootstrap carousel and I want to make the indicators thumbnails. I have a controller that looks like this (from the demo):

function carouselCtrl($scope) {
  $scope.myInterval = 5000;
  $scope.imgPath="img/slideshow/"
  var slides = $scope.slides = [{
    'imgName':'iguanas.jpg',
    'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
    'author':'(Reuters/Guillermo Granja)'
  },{
    'imgName':'eruption.jpg',
    'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
    'author':'(Reuters/Parque Nacional Galapagos)'
  },{
    'imgName':'bluefoot.jpg',
    'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
    'author':'(CC BY Michael McCullough)'
  }];

}

and the template looks like this:

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
    <ul class="carousel-indicators" ng-show="slides().length > 1">
        <li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>

    </ul>
    <div class="carousel-inner" ng-transclude></div>
    <a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">&lsaquo;</a>
    <a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">&rsaquo;</a>
</div>

I want to do something like this:

<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)" style="background-image:url({{slide.imgName}});"></li>

but I must be out of scope or something... Does anyone know any angular carousels that have a thumbnail option or how I can get this to work?

Answer 1

The slide array in the carousel template actually don't refer to the slides array you have defined in your app controller.

In the carousel template slides refer to a bunch of dom elements enhanced with internal properties. That's why any access to properties you have defined in our objects will failed when executed (scope issue as you guessed already).

If you want to stick to the carousel from angular-ui I would recommend a slightly different approach and go for css styling something like that:

  //Default styles for indicator elements
  .carousel-indicators li { 
    background-size : 42px 22px; 
    width : 42px;
    height: 22px;
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
  }

  // Then Specify a background image for every slide
  .carousel-indicators li:nth-child(1){
    background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
  }

  ...

You can see a working Plunker here.