el carrusel angularjs deja de funcionar

Question

Mar 25, 2014, 06:16 PM

el carrusel angularjs deja de funcionar

Estoy tratando de hacer un carrusel con ui-bootstrap para angularjs, básicamente copié / pegué directamente de los documentos angulares, y funciona PERO deja de funcionar en la última diapositiva.

No vuelve al principio, y los controles dejan de funcionar, no recibo ningún error en la consola, simplemente deja de funcionar

<carousel interval="myInterval">
      <slide ng-repeat="slide in carousel" active="slide.active">

        <img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">

      </slide>
    </carousel>

EDITAR: Lo he comprobado de nuevo y no deja de funcionar en la última diapositiva, en realidad se detiene en el SEGUNDO, sin importar cuántos elementos haya.

EDITAR: hice un sitio de prueba solo con el carrusel y todavía no funciona

Este es el código completo, se detiene en la diapositiva 2 y los controles dejan de funcionar

<html >
<head>

    <title>Radiosan Site</title>

    <link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">

    <script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>

    <script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>

    <script src="app/assets/lib/angular/angular.min.js" ></script>
    <script src="app/assets/lib/angular/angular-route.min.js" ></script>
    <script src="app/assets/lib/angular/angular-animate.min.js" ></script>

    <script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>

    <script src="app/RadiosanApp.js" ></script>

</head>

<body ng-app="RadiosanApp">

    <div class="container">

        <div ng-controller="MainController">
              <div style="height: 305px">
                <carousel interval="myInterval">
                  <slide ng-repeat="slide in slides" active="slide.active">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                      <h4>Slide {{$index}}</h4>
                      <p>{{slide.text}}</p>
                    </div>
                  </slide>
                </carousel>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
                </div>
                <div class="col-md-6">
                  Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
                  <br />Enter a negative number to stop the interval.
                </div>
              </div>
            </div>

    </div>

    <script src="app/controllers/MainController.js"></script>

</body>

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<4; i++) {
        $scope.addSlide();
      }


    });