angularjs window.alert() while using mouseEvents causes error

Question

Here is the link to the code:

http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview

Open up your javascript console and click on "say hi". It will trigger an error that $apply is already in progress.

But when you remove this piece of code:

ng-controller="mouseEvents" ng-mousedown="onMouseDown()" ng-mouseup="onMouseUp()" ng-mousemove="onMouseMove()"

and after saving when you click on "say hi" the error is gone.

How can I solve this?

I need the mouseEvents to set flags if the mouse is down or if it is up for multiple different controllers. I can not simply remove it in my code.

Edit:

Newer angular version solved my issue without $timeout v1.3.10 or higher

Answer 1

Use $timeout to let angular finish dirty checking then show the alert.

app.controller("demoController",function($scope,$window, $timeout){
  $scope.save = function(){
    $timeout(function(){
       window.alert("hi!");
    });

  };
}); 

Plunkr: http://plnkr.co/edit/Kxbey5Rc43xsB9v5ugZ5?p=preview