2 way data binding issue using IE 11 with AngularJ

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';

Answer 2

I think I have found my problem! I finally tried printing the data that is coming 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