Getting Angular.js error

Question

I'm following a tutorial on YouTube, and I ran into a problem which I cant figure out. I'm loading images into a angular bootstrap carousel. But I'm getting errors, and the images are not displaying.

Here is my error:

Here is my 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"
    }]
}]);

And here is my carousel:

<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 ***********************/

Fixed it, had to change HTML in carousel.

 <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

Your slides objects haven't id property so in ng-repeat you must set something like this:

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

or you can set an id for each slides objects.

Answer 2

slide.id is undefined, modify your controller like that:

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
}] }]);