Angular UI $modal error - angularjs

Question

I have downloaded some of the angular UI directives, as i do not need them all. I have downloaded the latest file for modal from http://angular-ui.github.io/bootstrap/ and using this code
App.controller('PagesController', ['$scope', '$modal', 'PageFactory', function ($scope, $modal, PageFactory) {
$scope.pages = [];
PageFactory.getPages().then(function (pages) {
$scope.pages = pages;
}, function (err) {
console.log(err.message);
});
$scope.deletePage = function (page) {
var modalInstance = $modal.open({
templateUrl: 'pages-delete-modal.html',
controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]
});
modalInstance.result.then(function () {
// ok selected
}, function () {
});
};
}]);
Here is the template
<script type="text/ng-template" id="pages-delete-modal.html">
<div class="modal-header">
<h3 class="modal-title">Delete Confirmation</h3>
</div>
<div class="modal-body">
Are you sure you want to delete this page?
</div>
<div class="modal-footer">
<button class="btn btn-danger" ng-click="ok()">Delete</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</script>
Now i seem to get an error saying
http://errors.angularjs.org/1.2.23/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal
I already have 'ui.bootstrap' injected into my app.js file here as you can see
var App = angular.module('MyApp', ['ui.router', 'ui.bootstrap']);
If i however use this link, instead of using the downloaded modal file, it works?
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
I have also downloaded the transition directive as i believe the modal directive is dependant on this, but i cannot see that i am missing anything else.
I am using the tpl.min.js files for both transition and modal.
Any help much appreciated

Answer 1

You should try change the modalInstance controller to a string with the name of an actual controller in your project.
$scope.deletePage = function (page) {
var modalInstance = $modal.open({
templateUrl: 'pages-delete-modal.html',
controller: 'otherCtrl'
});
modalInstance.result.then(function () {
// ok selected
}, function () {
});
};
and then create the controller itself
App.controller('otherCtrl',['$scope','$modalInstance', function($scope,$modalInstance){
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);