UI Bootstrap Carousel Demo

<!DOCTYPE html>
<html ng-app="carousel.demo">

<head>
  <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="styles.css" />
  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Carousel Demo</h1>
  <div ng-controller="CarouselDemoCtrl">
    <carousel carousel-controls interval="5000">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" class="main-image">
        <div class="carousel-caption">
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
    <hr>
    <p class="text-center">Access the carousel from the controller:</p>
    <ul class="carousel-thumbs">
      <li class="carousel-thumb" ng-repeat="thumb in slides" ng-click="setActiveSlide($index)" style="background-image: url({{thumb.image}}); width: {{100/slides.length}}%">{{thumb.text}}</li>
    </ul>
    <div class="clearfix"></div>
    <div class="text-center" style="margin-top:20px;">
      <button class="btn btn-primary" ng-click="getActiveSlide()">Get Active Slide</button>
      <button class="btn btn-primary" ng-click="goPrev()">Previous</button>
      <button class="btn btn-primary" ng-click="goNext()">Next</button>
    </div>
  </div>
</body>

</html>

var app = angular.module('carousel.demo', ['ngAnimate', 'ui.bootstrap']);

app.controller('CarouselDemoCtrl', ['$scope', function ($scope) {
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittens', 'Felines', 'Cuties'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
  
  $scope.getActiveSlide = function () {
    var activeSlide = slides.filter(function (s) { 
      return s.active;
    })[0];
    
    alert(slides.indexOf(activeSlide));
    
  };

  $scope.setActiveSlide = function (idx) {
    $scope.slides[idx].active=true;
  };
  
}]);


app.directive('carouselControls', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.goNext = function() {
        element.isolateScope().next();
      };
      scope.goPrev = function() {
        element.isolateScope().prev();
      };
      
    }
  };
});

#What this demo is about
Angular UI Bootstrap Carousel is awesome, but it doesn't expose all of 
the same events that you're used to if you've used the Bootstrap carousel 
jQuery plugin.  Generally, this isn't an issue.

On occasion, you may need to access some of the carousel behaviors from
your controller. If you can't accomplish what you need to by modifying
the carousel template, there's still hope.

This demo shows how you can use the exposed `active` property and `indexOf()`
method to get and set the active slide.

Additionally, this demo shows how you can create a simple custom directive
to expose the `next()` and `previous()` methods of the carousel.

.main-image {
  width: 100%;
}
.carousel-thumbs {
  list-style: none;
  padding: 0;
}
.carousel-thumb {
  background-size: cover; 
  background-position: center; 
  height: 100px; 
  float: left;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  cursor: pointer;
}