ui.bootstrap uibModal in Angular is breaking my page

Question

I'm currently going through the process of learning Angular and one of the tutorials i am following is using an older version of angular and as such the part which is teaching me about using ui.bootstrap is now out of date.

I am using angular v 1.4.9 and ui.bootstrap v 1.1.0.

my file that is trying to push a template into a new modal looks like this:

var angularFormsApp = angular.module('angularFormsApp', ['ngRoute', 'ui.boostrap']);

angularFormsApp.controller("HomeController",
function($scope, $location, $uibModal, DataService) {

    $scope.showCreateEmployeeForm = function() {
        //$location.path('/newEmployeeForm');
        $uibModal.open({
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: 'efController'
        });
    };

    $scope.showUpdateEmployeeForm = function(id) {
        $location.path('/updateEmployeeForm/' +id);
    }

});

I have read that ui.bootstrap can be loaded in on its own:

var angularFormsApp = angular.module('angularFormsApp', ['ngRoute'], ['ui.boostrap']);

but this is also giving me the same error(see below). can anyone see what i have done wrong here and help me out?

Error: [ng:areq] Argument 'fn' is not a function, got string

Answer 1

you have to chuckle sometimes...or perhaps not

the problem was with me trying to load "ui.boostrap", rather than "ui.bootstrap"

doh!

Answer 2

You shold provide controller class to $uibModal.open, not controllers name. Something like this:

$uibModal.open({
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: CfController
        });

function CfController() {
    //your controller code
}