AngularJS Question

problems working ui-bootstrap-tpls-2.0.2 Carousel AngularJS

I have the following problem when trying to add the bootstrap carousel ui where I can not see the image that I am calling on js


<!-- <link href="resource/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="//" rel="stylesheet">
<link href="resource/css/estilos.css" rel="stylesheet" >
<link rel="stylesheet" href="">

<script type='text/javascript' src='./resource/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app/controllers/Gallery2.js'></script>
<script type='text/javascript' src='./resource/framework/ui-bootstrap-tpls-2.0.2.js'></script>
<script type='text/javascript' src='./resource/angular-1.5.5/angular-animate.js'></script>


<div class="span10" >
<!--Body content-->
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by" index="">
<img ng-src="{{slide.Path}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.ImageID}}</h4>


angular.module('myModule', ['ngAnimate', 'ui.bootstrap']).controller('CarouselDemoCtrl',function ($scope) {
$scope.myInterval = 5000;
$scope.slides = [[
"ImageID": 1,
"Title": "Tulips",
"Summary": "This is summary of Tulips",
"Path": "\\resource\\img\\logo.png"


I also appears attributes this active , interval, wrap, index:

Attribute index is not allowed

I'd appreciate your help

Answer Source

You are tracking by the property id in <div uib-slide ng-repeat="slide in slides track by" index="">, $scope.slides items do not have that property. You can track by ImageId or change it to id. I included a link to a working jsFiddle based off your example for you.