Error in loading a bootstrap ui angular model

Question

I am new to angular and bootstrap, I have my login.html with LoginController.

I try to create a modal popup window, So in order to do it i need to add $modal to the controller, the current controller looks like:

angular.module('loginController', ['loginService']) .controller('LoginCtrl', ['$scope', 'LoginService', function($scope, LoginService) { 

But when i do:

angular.module('loginController', ['loginService','ui.bootstrap']) .controller('LoginCtrl', ['$scope', '$modal','LoginService', function($scope, $modal,LoginService) { 

I Received an error, and i am getting the following error:

Error: [$injector:modulerr] Failed to instantiate module loginController due to: Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to: Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

I guess i need to add bootstrap-ui somewhere, maybe to:

angular.module('myApp', [ 'ngRoute', 'bootstrap-ui', -> **when i add it, i still get the exception**. 

What am i doing wrong ?

Answer 1

You need to reference one of ui-bootstrap-*.js files in your html.