IE browser complaining about AngularJS $apply()

Question

Hi I'm trying to upload files to service following this tutorial: Upload files Angular, and some of the code is like this:

element.bind('change', function() {
    scope.$apply(function() {
        var file = element[0].files[0];
        ... //some logic
    });
});

It has been working fine on Chrome and Safari, but when I tested it on IE, it's giving me this error:

Error: [$rootScope:inprog] $apply already in progress

with reference to this line:

scope.$apply(function() {

and the following code doesn't get executed. I don't get such errors in Chrome and following code runs fine. I've tried this: get rid of $apply error, then the error doesn't show up, but the following code still doesn't execute. How can I solve this? Thanks! (I'm using IE11)

Have you tried `$timeout`? http://stackoverflow.com/a/18996042 — Satpal, Jun 14 '16 at 10:13
what triggers this error: a manual user input or a programmatic event? — floribon, Jun 14 '16 at 10:26

score 2 · Accepted Answer · answered Jun 14 '16 at 10:30

This kind of error comes when we forcefully try to run two digest cycle simultaneously.

Actually whenever we change modal, angular automatically runs digest cycle to get these updated values reflect in the view. While using $scope.$apply(), you are forcefully asking angular to run its digest cycle again without stopping the already running digest cycle, which throws an error.

Fix- $timeout(function(){ write yor code here.. },0)

IE browser complaining about AngularJS $apply()

1 Answers1