$uibModalInstance undefined (AngularJS UI.Bootstrap) - angularjs

Question

Why is $uibModalInstance unable to be injected here?
http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn?p=preview
baseController.$inject = ['$uibModal', '$uibModalInstance'];
function baseController($uibModal, $uibModalInstance) {
self.ok = function () {
$uibModalInstance.close(self.selected.item);
};
self.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
I am trying to access $uibModalInstance and if I try to inject it, I get an injection error.
If I don't inject it, then it's Undefined...

Answer 1

So LOTS of great statements here, but none of them quite solved the issue.
amg-argh got my plkr working with the way I had set up my injection
http://plnkr.co/edit/GXXmUosUEnEO3Tk0gUyp?p=preview
The biggest magic came from this edit here...
var childController = function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close({ my: 'data' });
}
$scope.cancel = function () {
$uibModalInstance.dismiss();
}
}
self.open = function (size) {
var modalInstance = $uibModal.open({
animation: self.animationsEnabled,
templateUrl: 'help.html',
controller: childController,
size: size
});
};
+++++++++++++++++++++++++++++
I also want to make a note that this SHOULD be done later on as a Service, just as icfantv has pointed out. But I need to figure out the syntax for returning and consuming the modal's promise...
Thank you everyone for your help!!
Cheers!

Answer 2

I suspect the reason your code is failing is because you're trying to inject the modal instance into the controller whose responsibility it is to create the modal. It can't inject it because it doesn't exist yet. Try using separate controllers: one for opening the modal and another for processing the modal contents. You can see an example of this in the Javascript portion of our modal example.
TBH, I've never seen dependencies injected that way before. Is there some problem you're solving by doing that? Any reason you're not just using:
angular.module(...).controller('MyController', ['dep1', dep2', ..., MyControllerFunction]);
function MyControllerFunction(dep1, dep2) {...}

Answer 3

There were a few things wrong with your plunk example:
The order in which you load your scripts is important, you had:
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.module.js"></script>
<script src="childController.js"></script>
<script src="baseController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
This will not work as app.module.js depends on the angular-ui-bootstrap.js and childController.js depends on angular-animate.js and childController.js depends on baseController.js You need to load the scripts in the following order:
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.module.js"></script>
<script src="baseController.js"></script>
<script src="childController.js"></script>
In childcontroller.js, you have:
angular
.module('app', ['ngAnimate'])
Which is recreating and overwriting the 'app' created in the app.module.js. You should inject the ngAnimate module in your app.module.js like so:
angular
.module('app', ['ngAnimate', 'ui.bootstrap']);
You don't need a reference to $uibModalInstance in your base controller, the:
var modalInstance = $uibModal.open({
animation: self.animationsEnabled,
templateUrl: 'help.html',
controller: 'BaseController',
size: size
});
gives you access to the modal you opened through 'var modalInstance' which has close and dismiss methods.