Получение ошибки Angular.js

Question

Я следую учебнику на YouTube, и у меня возникла проблема, которую я не могу понять. Я загружаю изображения в угловую карусель. Но я получаю ошибки, и изображения не отображаются.

Вот моя ошибка:

Вот мой homeController.js:

// Set up the "homeController", inject our "$scope" 
myApp.controller('homeController', ['$scope', function($scope) { 
    $scope.slides = [{ 
     image: "img/Astro_3.jpg" 
    }, 
    { 
     image: "img/main_2.jpg" 
    }, 
    { 
     image: "img/Xbox_Controller_2.jpg" 
    }] 
}]); 

А вот моя карусель:

<div class="row"> 
    <div class="col-md-3 col-md-offset-3"> 

     <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"> 
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 
      <img ng-src="{{slide.image}}" style="margin:auto;"> 
      <div class="carousel-caption"> 
       <h4>Slide {{slide.id}}</h4> 
       <p>{{slide.text}}</p> 
      </div> 
      </uib-slide> 
     </uib-carousel> 

    </div> 
</div> 

/**** ******************** EDIT ***********************/

Исправлено, пришлось менять HTML-код в карусели.

<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 {{slide.id}}</h4> 
       <p>{{slide.text}}</p> 
      </div> 
      </slide> 
     </carousel> 

Answer 1

slide.id неопределен, изменить ваш контроллер так:

myApp.controller('homeController', ['$scope', function($scope) { 
$scope.slides = [{ 
    image: "img/Astro_3.jpg", 
    id: 0 
}, 
{ 
    image: "img/main_2.jpg", 
    id: 1 
}, 
{ 
    image: "img/Xbox_Controller_2.jpg", 
    id: 2 
}] }]); 

Answer 2

слайды объекты не имеют свойство идентификатора так в нг-повторять вы должны установить что-то вроде этого:

ng-repeat="slide in slides track by slide.image" 

или вы можете установить идентификатор для каждого объекта слайдов.