Angular JS not working with IE9 but works with other browsers

Question

So I am working on a small app that gets that from an API url like so... $http.get(s_url) .then(function(res) {... My app works well with chrome,safari,opera and firefox but displays a blank screen in IE9 Am I missing something in my html or js file? Here is what I have in my html file for IE...

    <!--[if lte IE 8]>
    <script src="js/json2.js"></script>
    <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
        document.createElement('x-restrict');
        document.createElement('x-fileupload');
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
        //customized tags
        document.createElement('location');
        document.createElement('temp');
        document.createElement('image');
        document.createElement('caption');
        document.createElement('temps');
        document.createElement('remtemps');
    </script>
    <![endif]-->
    <div ng-view></div>
</head>

Solution 1

Try prefixing ng-app and ng-view with data as in data-ng-app, data-ng-view.

Solution 2

I had a similar issue. The page would load properly, calling angular to populate a table. subsequent clicks on a refresh button should recall the fetching method, but were ignored by the browser.

The resolution was to add content expiry headers expiring 5 seconds in the past, and then IE would execute the Angular scripts.

EDIT:

How to implement

The headers to add are specified in the HTTP specification.

I have printed a fixed timestamp here. You can of course set the date explicitly using date/time functions

Depending on which language you are using, and which webserver yuo are hosted on, there are different ways to do this:

.htaccess file:

<filesMatch "\.json">
   Header set Cache-Control "max-age=0, public"
   Header set Expires "Thu, 01 Dec 1994 16:00:00 GMT"
</filesMatch>

-note both shouldn't be necessary

if you are using php:

<? header("Expires: Thu, 01 Dec 1994 16:00:00 GMT");
   header("Cache-Control: max-age=0, public");  
?>

if you are using jsp:

<% 
   response.setHeader("Cache-Control: max-age=0, public");
%>