I have recently built a feature on our web application that uses AngularJS and I am having some issues with IE 11 not properly $apply()ing data changes to the DOM. For some reason this only occurs sometimes and never occurs when I try to debug the problem which makes it seem like a timing issue.

Here is the function that gets called when the problem occurs.

$scope.createThrottling = function (sources) {
            MYAPP.modals.Throttling('New', sources, API, function () {
                $scope.isLoading = true;

                $scope.$apply();


                API.Migrations.getThrottles({ id: jQuery.getUrlVar('id') }, function (data) {
                    $scope.Throttles = data.Throttles;
                    $scope.isLoading = false;

                    // THE PROBLEM IS RIGHT HERE

                });


            });
        }

The ment above shows where the problem seems to be stemming from. At this point in the execution of the code, Angular should automatically be checking for a change in $scope.Throttling and then make a change to the DOM accordingly, however, for some reason in IE 11, on the first visit to the page the binding is not occurring.

Subsequent refreshes of the page cause the binding to work however which seems very strange. It is as if $scope.$apply() is needed after API.Migrations.getThrottles is finished, but I cannot do that because Angular throws a JS error saying that it is already digesting.

Some things to note:

1. This only happens in IE
2. This only happens on the first visit to a page per load of the browser (I can hit F5 and try the same exact thing and it will work)
3. Could this be occurring because my API.Migrations.getThrottles call is inside a callback function for the MYAPP.modals.Throttling module which is outside of Angular pletely?
4. When I try to debug the JS function above, everything works just fine which makes it seem like a timing issue

Any help to finding out what is causing this bug would be much appreciated!

Thanks

I have recently built a feature on our web application that uses AngularJS and I am having some issues with IE 11 not properly $apply()ing data changes to the DOM. For some reason this only occurs sometimes and never occurs when I try to debug the problem which makes it seem like a timing issue.

Here is the function that gets called when the problem occurs.

$scope.createThrottling = function (sources) {
            MYAPP.modals.Throttling('New', sources, API, function () {
                $scope.isLoading = true;

                $scope.$apply();


                API.Migrations.getThrottles({ id: jQuery.getUrlVar('id') }, function (data) {
                    $scope.Throttles = data.Throttles;
                    $scope.isLoading = false;

                    // THE PROBLEM IS RIGHT HERE

                });


            });
        }

The ment above shows where the problem seems to be stemming from. At this point in the execution of the code, Angular should automatically be checking for a change in $scope.Throttling and then make a change to the DOM accordingly, however, for some reason in IE 11, on the first visit to the page the binding is not occurring.

Subsequent refreshes of the page cause the binding to work however which seems very strange. It is as if $scope.$apply() is needed after API.Migrations.getThrottles is finished, but I cannot do that because Angular throws a JS error saying that it is already digesting.

Some things to note:

1. This only happens in IE
2. This only happens on the first visit to a page per load of the browser (I can hit F5 and try the same exact thing and it will work)
3. Could this be occurring because my API.Migrations.getThrottles call is inside a callback function for the MYAPP.modals.Throttling module which is outside of Angular pletely?
4. When I try to debug the JS function above, everything works just fine which makes it seem like a timing issue

Any help to finding out what is causing this bug would be much appreciated!

Thanks

• javascript
• angularjs
• internet-explorer

• Try moving the $scope.$apply call into the the getThrottles callback – Patrick Evans Commented Aug 19, 2014 at 23:41
• That is what I tried. I mentioned above that doing so resulted in Angular throwing an error saying that it is already digesting – Matt Hintzke Commented Aug 19, 2014 at 23:46
• I tried using jQuery.on('throttleComplete', ... and jQuery.trigger('throttleComplete') to trigger the callback instead of actually using a callback and that did not help either – Matt Hintzke Commented Aug 19, 2014 at 23:47
• Did you delete $scope.$apply call from the .Throttling callback and only have it in the getThrottles callback – Patrick Evans Commented Aug 19, 2014 at 23:53
• 1 Actually I don't even need console.log().. if I have the debugger open at all then it works... i am beyond confused – Matt Hintzke Commented Aug 20, 2014 at 0:32

2 Answers 2

for the reference, found the solution here: http://www.oodlestechnologies./blogs/AngularJS-caching-issue-for-Internet-Explorer

$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Thu, 01 Jan 1970 00:00:00 GMT';

I think I have found my problem! I finally tried printing the data that is ing back from the server in the DOM without using the debugger and I realized that the API response is NOT giving me back new data! It is sending back cached data that is no longer valid which is why the objects are not showing up in the DOM. This also explains why using the debugger works because it forces each API call to not be cached!

I was able to fix this problem in my $resource by adding { _: Date.now() } in my params object in my $resource. This appends _=1234567890 to all GET calls for this $resource which forces IE to not cache