Карусель угловая UI-Bootstrap не работает
Я хочу сделать карусель с использованием Angular и Bootstrap, но она просто не работает. Я вообще не вижу карусели и вижу угловую скобку.
Другими словами, мой результат:
Здравствуйте, {{name}} Это ваши фотографии: Slide {{$ index + 1}}
Это мой index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval">
<uib-slide ng-repeat="slide in slides" active="active" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
и это мой javascript script.js
var myApp = angular.module('app', ['ui.bootstrap']);
myApp.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
});
РЕДАКТИРОВАТЬ Я изменил коды выше в соответствии с тем, что говорит ответ ниже. Это все еще не работает