title: Angular UI-Bootstrap carousel not working
body: <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>