refactor(carousel): use track by in template

Closes #1723

Author: bekos

src/carousel/carousel.js

@@ -9,14 +9,14 @@
 angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
 .controller('CarouselController', ['$scope', '$timeout', '$transition', function ($scope, $timeout, $transition) {
   var self = this,
-    slides = self.slides = [],
+    slides = self.slides = $scope.slides = [],
     currentIndex = -1,
     currentTimeout, isPlaying;
   self.currentSlide = null;
 
   var destroyed = false;
   /* direction: "prev" or "next" */
-  self.select = function(nextSlide, direction) {
+  self.select = $scope.select = function(nextSlide, direction) {
     var nextIndex = slides.indexOf(nextSlide);
     //Decide direction if it's not given
     if (direction === undefined) {
@@ -96,18 +96,10 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
     }
   };
 
-  $scope.select = function(slide) {
-    self.select(slide);
-  };
-
   $scope.isActive = function(slide) {
      return self.currentSlide === slide;
   };
 
-  $scope.slides = function() {
-    return slides;
-  };
-
   $scope.$watch('interval', restartTimer);
   $scope.$on('$destroy', resetTimer);
 

src/carousel/docs/demo.html

@@ -12,7 +12,7 @@ <h4>Slide {{$index}}</h4>
   </div>
   <div class="row">
     <div class="col-md-6">
-      <a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
+      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
     </div>
     <div class="col-md-6">
       Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">

template/carousel/carousel.html

@@ -1,8 +1,8 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
-    <ol class="carousel-indicators" ng-show="slides().length > 1">
-        <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
+    <ol class="carousel-indicators" ng-show="slides.length > 1">
+        <li ng-repeat="slide in slides track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
     </ol>
     <div class="carousel-inner" ng-transclude></div>
-    <a class="left carousel-control" ng-click="prev()" ng-show="slides().length > 1"><span class="icon-prev"></span></a>
-    <a class="right carousel-control" ng-click="next()" ng-show="slides().length > 1"><span class="icon-next"></span></a>
+    <a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1"><span class="icon-prev"></span></a>
+    <a class="right carousel-control" ng-click="next()" ng-show="slides.length > 1"><span class="icon-next"></span></a>
 </div>