title: angularjs corousel stops working
body: <p>Im trying to make a carousel with ui-bootstrap for angularjs, i basically copied/pasted directly from the angular docs, and it works BUT it stops working at the last slide.</p>
  
  <p>It does not come back to the beggining, and the controls stop working, im not getting any errors on the console, it simply stops working</p>
  
  <pre><code>&lt;carousel interval="myInterval"&gt;
        &lt;slide ng-repeat="slide in carousel" active="slide.active"&gt;
  
          &lt;img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;"&gt;
  
        &lt;/slide&gt;
      &lt;/carousel&gt;
  </code></pre>
  
  <p>EDIT: I have checked again And it does not stops working at the Last Slide, actually it stops at the SECOND, no matter how many elements there are.</p>
  
  <p>EDIT: I made a test site just with the carousel and still is not working</p>
  
  <p>This is the whole code, it stops at slide 2 and the controls stop working </p>
  
  <pre><code>&lt;html &gt;
  &lt;head&gt;
  
      &lt;title&gt;Radiosan Site&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css"&gt;
  
      &lt;script src="app/assets/lib/jquery/jquery-2.1.0.min.js" &gt;&lt;/script&gt;
  
      &lt;script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" &gt;&lt;/script&gt;
  
      &lt;script src="app/assets/lib/angular/angular.min.js" &gt;&lt;/script&gt;
      &lt;script src="app/assets/lib/angular/angular-route.min.js" &gt;&lt;/script&gt;
      &lt;script src="app/assets/lib/angular/angular-animate.min.js" &gt;&lt;/script&gt;
  
      &lt;script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/RadiosanApp.js" &gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="RadiosanApp"&gt;
  
      &lt;div class="container"&gt;
  
          &lt;div ng-controller="MainController"&gt;
                &lt;div style="height: 305px"&gt;
                  &lt;carousel interval="myInterval"&gt;
                    &lt;slide ng-repeat="slide in slides" active="slide.active"&gt;
                      &lt;img ng-src="{{slide.image}}" style="margin:auto;"&gt;
                      &lt;div class="carousel-caption"&gt;
                        &lt;h4&gt;Slide {{$index}}&lt;/h4&gt;
                        &lt;p&gt;{{slide.text}}&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/slide&gt;
                  &lt;/carousel&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                    &lt;a class="btn btn-info" ng-click="addSlide()"&gt;Add Slide&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                    Interval, in milliseconds: &lt;input type="number" class="form-control" ng-model="myInterval"&gt;
                    &lt;br /&gt;Enter a negative number to stop the interval.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src="app/controllers/MainController.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>var app = 
  angular.module(
      "RadiosanApp", [
      "ngRoute",
      "ui.bootstrap",
      "ngAnimate",
      "RadiosanApp.Controllers.MainController"
      ]);
  
  angular.module("RadiosanApp.Controllers.MainController", [])
      .controller("MainController", function($scope) {
  
        $scope.myInterval = 5000;
        var slides = $scope.slides = [];
        $scope.addSlide = function() {
          var newWidth = 600 + slides.length;
          slides.push({
            image: 'http://placekitten.com/' + newWidth + '/300',
            text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
              ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
          });
        };
        for (var i=0; i&lt;4; i++) {
          $scope.addSlide();
        }
  
  
      });
  </code></pre>