Add a new paused attribute to the carousel

src/carousel/carousel.js

@@ -154,6 +154,18 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
       }
     }
   };
+
+  // watch the paused attribute for changes
+  $scope.$watch('paused', function() {
+
+    if($scope.paused) {
+        $scope.pause();
+    } else {
+        $scope.play();
+    }
+
+  });
+
 }])
 .directive('carousel', [function() {
   return {
@@ -165,7 +177,8 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
     templateUrl: 'template/carousel/carousel.html',
     scope: {
       interval: '=',
-      noTransition: '='
+      noTransition: '=',
+      paused: '='
     }
   };
 }])

src/carousel/docs/demo.html

@@ -1,5 +1,5 @@
 <div ng-controller="CarouselDemoCtrl">
-  <carousel interval="myInterval">
+  <carousel interval="myInterval" paused="isPaused.value">
     <slide ng-repeat="slide in slides" active="slide.active">
       <img ng-src="{{slide.image}}" style="margin:auto;">
       <div class="carousel-caption">
@@ -9,7 +9,7 @@ <h4>Slide {{$index}}</h4>
     </slide>
   </carousel>
   <div class="row-fluid">
-    <div class="span6">
+    <div class="span4">
       <ul>
         <li ng-repeat="slide in slides">
           <button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
@@ -18,9 +18,16 @@ <h4>Slide {{$index}}</h4>
       </ul>
       <a class="btn" ng-click="addSlide()">Add Slide</a>
     </div>
-    <div class="span6">
-      Interval, in milliseconds: <input type="number" ng-model="myInterval">
+    <div class="span4">
+      Interval(milliseconds): <input type="number" ng-model="myInterval" class="input-small">
       <br />Enter a negative number to stop the interval.
     </div>
+    <div class="span4">
+
+      <label>Paused: </label>
+
+      <select ng-model="isPaused" ng-options="s.value for s in pausedValues" class="input-small"></select>
+
+    </div>
   </div>
 </div>

src/carousel/docs/demo.js

@@ -13,4 +13,11 @@ function CarouselDemoCtrl($scope) {
         ['Cats', 'Kittys', 'Felines', 'Cutes'][Math.floor(Math.random()*4)]
     });
   };
+
+  $scope.pausedValues = [
+    { value: false },
+    { value: true }
+  ];
+  $scope.isPaused = $scope.pausedValues[0];
+
 }