title: Inject bootstrap in angularjs
body: <p>I looked over examples, but I couldn't find way to fix it. I am trying to inject 'ui.bootstrap' in my angular app. 
  This is index.hml and my controller below:</p>
  
  <pre><code> &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet"&gt;
      &lt;link href="app-content/css/style.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
      crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;   
      &lt;script src="//code.angularjs.org/1.6.2/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="//code.angularjs.org/1.6.2/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="//code.angularjs.org/1.6.2/angular-cookies.min.js"&gt;&lt;/script&gt;
      &lt;script src="app-content/js/jquery.matchHeight.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/GuestBookProject/node_modules/angular-gravatar/build/angular-gravatar.js"&gt;&lt;/script&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;script src="app-services/authentication.service.js"&gt;&lt;/script&gt;
      &lt;script src="app-services/flash.service.js"&gt;&lt;/script&gt;
      &lt;script src="app-services/user.service.js"&gt;&lt;/script&gt; 
      &lt;script src="app-services/universal.service.js"&gt;&lt;/script&gt;
      &lt;script src="navbar/navbar.controller.js"&gt;&lt;/script&gt;
      &lt;script src="main/main.controller.js"&gt;&lt;/script&gt;   
      &lt;script src="review/review.controller.js"&gt;&lt;/script&gt;  
      &lt;script type="text/javascript" src="app-content/js/slick.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://use.fontawesome.com/be81ee5934.js"&gt;&lt;/script&gt;
      &lt;script src="app-content/js/script.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular.module('app').controller('MainController', MainController);
  
  MainController.$inject = ['$location', 'AuthenticationService', 'FlashService', 'UniversalService', '$scope', '$sce', '$rootScope','ui.bootstrap', 'ui.router'];
  function MainController($location, AuthenticationService, FlashService, UniversalService, $scope, $sce, $rootScop) {
     var vm = this;
      vm.allreviews = [];
      vm.allusers=[];
      vm.allemails=[];
      vm.all=[];
  
      loadAllReviews();
      loadAllEmails();
      loadAllUsers();
      loadAll();
  
      $scope.rate = 1;
      $scope.max = 10;
      $scope.isReadonly = false;
  
      $scope.hoveringOver = function(value) {
          $scope.overStar = value;
          $scope.percent = 100 * (value / $scope.max);
      };
  
      $scope.ratingStates = [
  {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
  {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
  {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
  {stateOn: 'glyphicon-heart'},
  {stateOff: 'glyphicon-off'}
  </code></pre>
  
  <p>After trying t inject i get errors:</p>
  
  <pre><code>code.angularjs.org/1.6.2/angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=ui.bootstrapProvider%20%3C-%20ui.bootstrap%20%3C-%20MainController
  at https://code.angularjs.org/1.6.2/angular.min.js:6:425
  at https://code.angularjs.org/1.6.2/angular.min.js:44:374
  at Object.d [as get] (https://code.angularjs.org/1.6.2/angular.min.js:42:92)
  at https://code.angularjs.org/1.6.2/angular.min.js:44:436
  at d (https://code.angularjs.org/1.6.2/angular.min.js:42:92)
  at e (https://code.angularjs.org/1.6.2/angular.min.js:42:333)
  at Object.instantiate (https://code.angularjs.org/1.6.2/angular.min.js:43:240)
  at https://code.angularjs.org/1.6.2/angular.min.js:93:141
  at Object.link (https://code.angularjs.org/1.6.2/angular-route.min.js:7:322)
  at https://code.angularjs.org/1.6.2/angular.min.js:16:71 
  </code></pre>