moving angular modal controllers into separate files - angularjs

Question

I have a page controller on my site that includes several modals. Some of the modal controllers are getting robust, and I would like to move them into separate controllers without losing the scope of the outer page controller (the modal controller uses some of the page controllers functions and properties) - is this possible? So far I am getting errors to anything which references the outer controller. Here is a simple example of how I have it set up:
the page controller:
angular.module('myApp')
.controller('outerCtrl', function(MetaService) {
var thisCtrl = this;
thisCtrl.someFunction = function() {
//some cool functionality that will elvaluate something
}
function optionsModal() {
var PageCtrl = thisCtrl;
$uibModal.open({
'controller': 'scripts/controllers/optionsModal.js',
'controllerAs': 'ModalCtrl',
'templateUrl': 'views/modals/optionsModal.html',
'size': 'md'
});
}
});
the modal controller:
angular.module('myApp')
.controller('optionsModalCtrl', function(MetaService) {
var modalCtrl = this;
function giveOptions() {
if (PageCtrl.someFunction()) {
//offer some option
} else {
//offer a different option
}
}
});

Answer 1

Here is the example from official page:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope, // pass parent scope to modal instance
resolve: {
items: function () {
return $scope.items;
}
}
});