Angular with ui.bootstrap rendering blank page

Question

I used Yeoman to create an angular application that included bootstrap. Then, I used Bower to install ui.bootstrap using the instructions on the readme at https://github.com/angular-ui/bootstrap.

I am now trying to adapt the carousel example at http://angular-ui.github.io/bootstrap/.

When I include ui.bootstrap, I just get a blank page. I tried the page in Chrome and Firefox and don't get any errors or output in the console.

Here's my js (cat.js):

 'use strict';
angular.module('yoApp', ['ui.bootstrap'])
.controller('CatCtrl', function ($scope, $http) {

  var cats = $http.get('/rt/cats.json')
  .success(
    function (data, status, headers, config) { 
      $scope.slides = data;
    });

  $scope.myInterval = 5000;
  var slides = $scope.slides;
  $scope.addSlide = function() {
    var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/200',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
      ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

I tried this with and without the http.get.

The html page:

<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 {{$index}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </slide>
  </carousel>
  <div class="row-fluid">
    <div class="span6">
      <ul>
        <li ng-repeat="slide in slides">
          <button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
          {{$index}}: {{slide.text}}
        </li>
      </ul>
      <a class="btn" ng-click="addSlide()">Add Slide</a>
    </div>
    <div class="span6">
      Interval, in milliseconds: <input type="number" ng-model="myInterval">
      <br />Enter a negative number to stop the interval.
    </div>
  </div>

I have my route set up:

'use strict';

angular.module('yoApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.bootstrap'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/cat', {
        templateUrl: 'views/cat.html',
        controller: 'CatCtrl'
      })
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

The weird thing is that when I take out the ['ui.bootstrap'] in cat.js, part of the page actually renders but I get these errors in Chrome:

> TypeError: Cannot read property 'length' of undefined
    at Object.$scope.addSlide (http://localhost:9000/scripts/controllers/cat.js:14:34)
    at new <anonymous> (http://localhost:9000/scripts/controllers/cat.js:22:12)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
    at http://localhost:9000/bower_components/angular/angular.js:4981:24
    at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
    at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
    at http://localhost:9000/bower_components/angular/angular.js:7614:26
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) angular.js:5930
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/carousel/slide.html
Error: Failed to load template: template/carousel/slide.html
    at Error (<anonymous>)
    at http://localhost:9000/bower_components/angular/angular.js:4725:17
    at http://localhost:9000/bower_components/angular/angular.js:9144:11
    at wrappedErrback (http://localhost:9000/bower_components/angular/angular.js:7004:57)
    at http://localhost:9000/bower_components/angular/angular.js:7080:53
    at Object.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:8218:28)
    at Object.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:8077:25)
    at Object.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:8304:24)
    at done (http://localhost:9000/bower_components/angular/angular.js:9357:20)
    at completeRequest (http://localhost:9000/bower_components/angular/angular.js:9520:7) 

Any ideas on what I could be doing wrong? I've been able to get other features to work in other controllers and can get plain text to render inside the Bootstrap theme, but for some reason I am not able to get the carousel to work.

Here's my index.html with my includes after following pkozlowski-opensource's suggestion. I am only able to get the carousel page to render by leaving out the ['ui.bootstrap'] in the module declaration so I must still be doing something wrong.

    <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/bootstrap.css">
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
</head>
  <body ng-app="yoApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="bower_components/es5-shim/es5-shim.js"></script>
      <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>

        <!-- build:js scripts/plugins.js -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> -->
        <!-- endbuild -->

        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

        <!-- build:js scripts/modules.js -->

        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="//localhost:35729/livereload.js"></script>
        <script src="scripts/app.js"></script>

         <script src="scripts/controllers/cat.js"></script>
        <!-- endbuild -->
</body>
</html>

Answer 1

As @Elise Chant pointed out in the comments above - including:

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

fixed the 404 errors referencing the /template/X.html files for me.