Unknown provider error. how to add angular-bootsrap on angularjs

Question

yo angular
bower install angular-bootstrap --save

added 'ui.bootstrap' in app.js. added

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

in index.html. checked bower.json that it has 'angular-bootstrap'.

now i got

Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile

---

here is my whole code [app/scripts/app.js]

'use strict';

/**
 * @ngdoc overview
 * @name radio2App
 * @description
 * # radio2App
 *
 * Main module of the application.
 */
angular
  .module('radio2App', [
    'ngAnimate',
    'ngCookies',
    'ngRoute',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

[app/scripts/main.js]

'use strict';

/**
 * @ngdoc function
 * @name radio2App.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the radio2App
 */
angular.module('radio2App')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

[bower.json]

{
  "name": "radio2",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "json3": "^3.3.0",
    "es5-shim": "^4.0.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-bootstrap": "~0.12.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.0",
    "angular-scenario": "~1.3.0"
  },
  "appPath": "app"
}

[app/index.html]

.....
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
.....

most of codes are made by yo scaffolding tool.. i added just few line as i mentioned.

Answer 1

angular.module('myModule', ['ui.bootstrap']);

you should include BootStrap Dependency in your Module Configuration like above code,it's necessary to add when you are using BootStrap