How can I call a parent function from ui-modal AngularJS?

Question

Here is my modal function:

$uibModal.open({
   templateUrl: config.baseUrl + '/ClientApp/Views/Modals/userEditModal.html' + config.scriptVersion,
   size: size,
   scope: $scope,
   controller: function ($scope, $uibModalInstance) {                
     $scope.cancel = function () {
       $uibModalInstance.close();
     };
   }
}).result.catch(function (resp) {           
   if (['cancel', 'backdrop click', 'escape key press'].indexOf(resp) === -1) {
     throw resp;
   }
})

This $uibModal is inside a controller where I have other $scope variables and functions. If I do an ng-repeat inside the modal with a parent scope object the ng-repeat works! But if I call a function ex. doSomething() or try to use a scope object in ng-class ex. ng-class="{'css': doSomething()}" - it doesn't. As you can see I assigned $scope to the scope property in the modal. What am I doing wrong? I also tried calling the function with $parent and still doesn't work ex. ng-if="$parent.doSomething()"

Answer 1

What about just using a reference to the function that already exists when you define the modal ? bind a property to your controller's scope and pass it around to your modal.

bindToController: true,
controllerAs: 'parent'

Then just pass doSomething

function myController($uibModal) {

    var parent = this;
    parent.doSomething = function() {
        /** does something ... **/
    };

    $uibModal.open({
       templateUrl: config.baseUrl + '/ClientApp/Views/Modals/userEditModal.html' + config.scriptVersion,
       size: size,
       scope: $scope,
       controller: function ($scope, $uibModalInstance) {  

         $scope.doSomethingDelegate = parent.doSomething;

         // ... more stuff
       }
    })
}

And then in your modal template

<element ng-if="doSomethingDelegate()"></element>