2 way data binding issue using IE 11 with AngularJS

Question

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 comment 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 completely?
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

Answer 1

for the reference, found the solution here: http://www.oodlestechnologies.com/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';