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?

Solution

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.

Comments

[myklee]

Thanks for the answer, that makes sense. I ended up not using the template for my thumbnails and did something similar to the demo, plnkr.co/edit/?p=preview , so it stays in scope. I just hide the carousel template and use the repeater thats in the scope for my thumbnails. Still not totally sure how that works but it works at least! thanks!

[Logus Graphics]

This can't be a solution to the problem at all. Not even a workaround. What if all the data comes from a database and it's subject to modification.

[Hesham El Masry]

man please could you get a js fiddle for it i tried it but not working actually

[Logus Graphics]

Ok @HeshamElMasry here's the fiddle jsfiddle.net/logus/6mvjpf40