fixing autosilder on ng-repeat items

dist/angular-carousel.js

@@ -1,6 +1,6 @@
 /**
  * Angular Carousel - Mobile friendly touch carousel for AngularJS
- * @version v0.2.3 - 2014-07-21
+ * @version v0.2.3 - 2014-08-25
  * @link http://revolunet.github.com/angular-carousel
  * @author Julien Bouquillon <[email protected]>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -23,46 +23,54 @@ angular.module('angular-carousel')
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
+
         var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000),
-            timer = increment = false, slidesCount = element.children().length;
+            timer =  false, slidesCount = element.children().length;
 
-        if(!scope.carouselExposedIndex){
-            scope.carouselExposedIndex = 0;
-        }
-        stopAutoplay = function () {
+
+        var stopAutoPlay = function () {
             if (angular.isDefined(timer)) {
                 $timeout.cancel(timer);
             }
             timer = undefined;
         };
 
-        increment = function () {
+        var increment = function () {
             if (scope.carouselExposedIndex < slidesCount - 1) {
                 scope.carouselExposedIndex =  scope.carouselExposedIndex + 1;
             } else {
                 scope.carouselExposedIndex = 0;
             }
         };
 
-        restartTimer = function (){
-            stopAutoplay();
-            timer = $timeout(increment, delay);
+        var restartTimer =function (){
+            stopAutoPlay();
+            timer = $timeout(function(){
+                increment()
+            }, delay);
         };
 
+        scope.$on('rnCarousel:CollectionUpdated', function($parentscope, newSlidesCount){
+            slidesCount = newSlidesCount;
+        });
+
+        if(!scope.carouselExposedIndex){
+            scope.carouselExposedIndex = 0;
+        }
+
         scope.$watch('carouselIndex', function(){
            restartTimer();
         });
 
         restartTimer();
         if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){
-            element.on('mouseenter', stopAutoplay);
-
+            element.on('mouseenter', stopAutoPlay);
             element.on('mouseleave', restartTimer);
         }
 
         scope.$on('$destroy', function(){
-            stopAutoplay();
-            element.off('mouseenter', stopAutoplay);
+            stopAutoPlay();
+            element.off('mouseenter', stopAutoPlay);
             element.off('mouseleave', restartTimer);
         });
 
@@ -275,6 +283,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                             } else if (angular.isObject(newValue)) {
                                 slidesCount = Object.keys(newValue).length;
                             }
+                            scope.$emit('rnCarousel:CollectionUpdated', slidesCount);
                             updateIndicatorArray();
                             if (!containerWidth) updateContainerWidth();
                             goToSlide(scope.carouselIndex);

index.html

@@ -123,7 +123,7 @@ <h3>Autoplay slider</h3>
             <br/>
             By adding <strong>rn-carousel-pause-on-hover="true"</strong>  the slide will pause on mouse hover and start on mouse leave
         </div>
-        <ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3" rn-carousel-control="true" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak">
+        <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-control="true" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak">
             <li ng-style="{'background-color': colors[0]}">
                 This is a standard template
                 <div class="big">slide #1</div>
@@ -141,6 +141,22 @@ <h3>Autoplay slider</h3>
                 <iframe width="100%" height="80%" src="//www.youtube.com/embed/OQSNhk5ICTI" frameborder="0" allowfullscreen></iframe>
             </li>
         </ul>
+
+        <h3>Autoplay slider with <strong>ng-repeat</strong></h3>
+
+        <div class="details">
+            <strong>rn-carousel-auto-slide</strong> works with ng-repeat
+        </div>
+        <ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-pause-on-hover="true" class="my-slider standard ng-cloak">
+            <li ng-repeat="slide in slides4" ng-style="{'background-image': 'url(' + slide.img + ')'}">
+                <div class="debug">
+                    {{ slide.label }} / {{ slides4.length }}
+                    <br>
+                    carouselIndex: {{ carouselIndex }}<br>
+                    carouselBufferIndex: {{ carouselBufferIndex }}<br>
+                </div>
+            </li>
+        </ul>
         <br/><br/>
         <h3>Other demos</h3>
         <ul>