Usé Yeoman para crear una aplicación angular que incluía bootstrap. Luego, utilicé Bower para instalar ui.bootstrap utilizando las instrucciones del archivo léame enhttps://github.com/angular-ui/bootstrap.

Ahora estoy tratando de adaptar el ejemplo del carrusel enhttp://angular-ui.github.io/bootstrap/.

Cuando incluyo ui.bootstrap, solo obtengo una página en blanco. Probé la página en Chrome y Firefox y no obtengo ningún error o salida en la consola.

Aquí está mi 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();
  }
});

Intenté esto con y sin el http.get.

La página html:

<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>

Tengo mi ruta configurada:

'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: '/'
      });
  });

Lo extraño es que cuando saco el['ui.bootstrap'] en cat.js, parte de la página se procesa pero recibo estos errores en 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) 

¿Alguna idea sobre lo que podría estar haciendo mal? He logrado que otras funciones funcionen en otros controladores y puedo hacer que el texto sin formato se reproduzca dentro del tema de Bootstrap, pero por alguna razón no puedo hacer que funcione el carrusel.

Aquí está mi index.html con mi incluye después de seguir la sugerencia de pkozlowski-opensource. Solo puedo obtener la página del carrusel para renderizar dejando fuera el['ui.bootstrap'] en la declaración del módulo así que todavía debo estar haciendo algo mal.

    <!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>