Error in loading a bootstrap ui angular model

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 ?