Calling a controller function from a directive with isolated scope without creating a markup attribute

Question

Related to this question but I don't want to create an attribute in the markup to call the function.

I have a sticky problem involving a controller, a directive with isolated scope and a disappearing kendo ui modal dialog. The culprit is of course IE.

When my app loads, it has a menu with an item called 'Open Dialog'. When you click it, it calls a function on a controller called callModal():

// javascript object used to build menu. Used by another directive to build the app's menu & is shown here just for illustration   
"quickLinks": [ {"label": "Open Dialog", "action": "callModal()", "actionController": "ModalController"} ]

// the controller    
angular.module('myModule').controller('ModalController', ['$scope','modalService', function ($scope, modalService) {

    $scope.callModal = function () {           
       var modal = {
          scope: $scope,
          title: 'Add a user',
          templateUrl: 'modal.html'              
       };

       modalService.openDialog(modal, function (result) {
          //service code to open a kendo ui dialog, not relevant to this question     
       });
    };
}]);

When I reduce the browser (IE only, Chrome is fine), the modal dialog disappears from view. I can't even find it on the DOM in IE and I don't know why.

My proposed solution is to hook into the brower's resize event and recreate the dialog by calling the controller function, $scope.callModal().

To do this I have to use scope.$parent.$parent.callModal() and I've been told that this is wrong.

Can anyone suggest a better way of doing this?

This is my directive code:

angular.module('myModule').directive('modalDialog', ['$window', function (myWindow) {
   return {
    restrict: 'ACE',
    replace: true,
    transclude: true,
    scope: {
       // various attributes here
    },
    template: '<div kendo-window></div>',
    compile: function (tElement, tAttrs, transclude) {
        return function (scope, element, attrs) {

           var viewWindow = angular.element(myWindow); // cast window to angular element
           viewWindow.bind('resize', autoResizeHandler); // bind resize

           var resizeHandler = function() { // the resize handler function
              /*
                Try find the dialog. If not found, then call
                controller function to recreate
              */
              var kendoModal = jQuery('div[kendo-window]');
              if (kendoModal.length === 0) {
                 scope.$parent.$parent.callModal(); // this works but it's ugly!
              }
           };