Angular: $apply already in progress in IE11, but not in FF and Chrome

Actually, chrome and FF javascript engines are very fast when compared to IE11 javascript engine.

Hence, when the $scope.$on("fileSelected" is triggered in chrome & FF, the previous $digest loop will be completed at the time of $scope.$apply is executed and hence no errors. As there is no $digest cycle is running at this stage, we need another $digest cycle to update the view with help of $scope.$apply and without this, view won't be updated.

As IE is comparatively slow on the same scenario above, $scope.$apply is throwing error as there is one $digest loop is running currently. Hence, without $scope.$apply, the view will get updated with help of the running $digest cycle.

When we use $timeout as said by other users, it will start executed once the current $digest cycle is completed and making sure to update the view with another $digest loop.

Hope it will clarify you :-)

$scope.$on("fileSelected", function (event, args) {
        $timeout(function () {
            switch (args.field) {
                case "aircraftList":
                    self.attachments.aircraftList = args.files;
                    break;
                default:
                    break;
            }
        });
    });

i don't know why both the browsers are behaving diffrently. But I know to get rid of this error and make it work

You have used $apply(). If you get $rootScope:inprog error, it means already a digest cycle is running. To avoid this error wrap your $apply function under a timeout condition.

like this,

$scope.$on("fileSelected", function (event, args) {
$timeout(function () {
$scope.$apply(function () {
        switch (args.field) {
            case "aircraftList":
                self.attachments.aircraftList = args.files;
                break;
            default:
                break;
        }
    });
  },500);
});

I hope this works for you.

You stuck into this issue as your code try to trigger digest cycle before one got completed and that you are facing only in IE probably because of slow nature of IE. so my idea is to use $scope.$evalAsync

$scope.$evalAsync(function () {
            switch (args.field) {
                case "aircraftList":
                    self.attachments.aircraftList = args.files;
                    break;
                default:
                    break;
            }
        });

$scope.$evalAsync will adds the supplied function to a queue that will be drained at the beginning of the next loop in a digest cycle.

I hope this work for you.

Thanks