Angular UI-Bootstrap carousel not working
<p>I want to make a carousel using angular and Bootstrap but it simply doesn't work. I can't see the carousel at all and I see angular's brackett.</p>

<p>In other words, my result is:</p>

<p>Hi {{name}} Those are your photos:
Slide {{$index+1}}</p>

<p>This is my index.html</p>

<pre><code>&lt;!doctype html&gt;
&lt;html ng-app="app"&gt;
&lt;head&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"&gt;&lt;/script&gt;
    &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link href="style.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;
        Write your name here &lt;input type="text" ng-model="name"&gt;
        Hi {{name}} Those are your photos:  
        &lt;div ng-controller="CarouselDemoCtrl" id="slides_control"&gt;
            &lt;div&gt;
                &lt;uib-carousel interval="myInterval"&gt;
                    &lt;uib-slide ng-repeat="slide in slides" active="active" index="$index"&gt;
                        &lt;img ng-src="{{slide.image}}" style="margin:auto;"&gt;
                        &lt;div class="carousel-caption"&gt;
                            &lt;h4&gt;Slide {{$index+1}}&lt;/h4&gt;
                        &lt;/div&gt;
                    &lt;/uib-slide&gt;
                &lt;/uib-carousel&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;  
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and this is my javascript script.js</p>

<pre><code>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'
                     }
                   ];
});
</code></pre>

<p><strong>EDIT</strong> I changed the codes above according to what the answer below says. It still doesn't work</p>