Inject bootstrap in angularjs

Question

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:

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
    <link href="app-content/css/style.css" rel="stylesheet" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   
    <script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
    <script src="//code.angularjs.org/1.6.2/angular-route.min.js"></script>
    <script src="//code.angularjs.org/1.6.2/angular-cookies.min.js"></script>
    <script src="app-content/js/jquery.matchHeight.js" type="text/javascript"></script>
    <script src="/GuestBookProject/node_modules/angular-gravatar/build/angular-gravatar.js"></script>

    <script src="app.js"></script>
    <script src="app-services/authentication.service.js"></script>
    <script src="app-services/flash.service.js"></script>
    <script src="app-services/user.service.js"></script> 
    <script src="app-services/universal.service.js"></script>
    <script src="navbar/navbar.controller.js"></script>
    <script src="main/main.controller.js"></script>   
    <script src="review/review.controller.js"></script>  
    <script type="text/javascript" src="app-content/js/slick.min.js"></script>

    <script src="https://use.fontawesome.com/be81ee5934.js"></script>
    <script src="app-content/js/script.js"></script> 

This is my controller:

(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'}

After trying t inject i get errors:

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 

Answer 1

There are several things wrong with your code.

First of all, I don't see any script tag that references the ui-bootstrap js files. Add them to your head:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

Secondly, the ui-bootstrap is a module, so you should add them to your module dependencies:

angular.module("app", [
    "ui.bootstrap",
    "ui.router" // the same goes for this one
]);

On a small note, you are loading in the bootstrap.css twice (also with different versions):

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

You should remove one of them.