Modal doesn't always close on outside click if browser is heavily loaded

[jessefoster]

It seems like #2280 accidentally changed the api of one of your calls. You registered click events outside the modal via ng-click before. However #2280 bugfix switched to using element.on('click') instead. This is not the same as the event handler may run outside of a digest cycle if the browser is heavily loaded.

Howevever looking at ng-click's code you can see it always wraps the click handlers with $apply.
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js#L61-L71

 element.on(eventName, function(event) {
    var callback = function() {
        fn(scope, {$event:event});
    };
    if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
        scope.$evalAsync(callback);
    } else {
        scope.$apply(callback);
    }
});

I can't reproduce this in a plunker at it happens too randomly. However I haven't seen the issue reappear since wrapping the scope.close click handler with $apply.

[wesleycho]

I'm confused as why it wouldn't be equivalent - are you sure you are identifying the culprit correctly here?

I'm not sure whether we can do much about this without a reproduction or a clear stepthrough of what is happening.

[jessefoster]

The crazy thing about this bug is if I debug it then everything works fine. This is what leads me to believe it's a timing issue related to falling out of the digest cycle.

[jessefoster]

After some extensive debugging I found out why this issue is occurring. In your modalBackdrop and modalWindow directives you listen for the $modalStack.NOW_CLOSING_EVENT. If ngAnimate module is not loaded, then the event listener will use $animate to remove a class and resolve a promise. This promise is chained to the element's removal.

$animate internally schedules the removal of css classes via $$postDigest on $rootscope. Whenever I run your examples the $$postDigestQueue is processed correctly and all promises resolve. However within the app I'm working with $$postDigestQueue doesn't get processed and I see 2 functions queued waiting to make dom manipulations. I have no idea how anything could alter the runtime behavior of Angular but something within the app has. Until I find the root cause I'm using the workaround of wrapping the close call with scope.$apply().