How to Prevent Caching in IE8 when using AngularJS Models

Question

My technology stack is -

1. AngularJS
2. Bootstrap
3. Spring MVC
4. Hibernate

What am I doing :

There is a list of Items on which I am doing CRUD (Create, Read, Update and Delete)

1. Posting form Data via Angular Controller to a Spring Controller.
2. Spring Controller -> DAO method -> DB is updated
3. Spring Controller Returns "Y" or "N"
4. Angular gets the Status Message and Reloads the Angular Model(A Json Array to populate the List of Items)
5. Same with Update and Delete

My objective is to achieve real-time data manipulation without page reload.

This works fine in Chrome. However, IE can not detect the Model Change. It keeps displaying the data prior to addition/updation/deletion (from its cache). Only after I clear the cache manually, am I actually able to see the changed Model.

Need help on how to resolve this problem with IE8 and above.

P.S. I have already tried setting the meta headers

Answer 1

You can set

"No-Cache headers to the response on server side"

var AppInfrastructure = angular.module('App.Infrastructure', []);

and in Angularjs you can write interceptor below is the sample code:

AppInfrastructure
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
    })    
    .factory('httpRequestInterceptorCacheBuster', function () {
        return function (promise) {
            return promise.then(function (request) {
                if (request.method === 'GET') {
                    var sep = request.url.indexOf('?') === -1 ? '?' : '&';
                    request.url = request.url + sep + 'cacheSlayer=' + new Date().getTime();
                }

                return request;
            });
        };
    });   

Answer 2

same as what Jquery Guru mentioned above, but it is config in newer version of angular

.factory('noCacheInterceptor', function () {
        return {
            request: function (config) {
                console.log(config.method);
                console.log(config.url);
                if(config.method=='GET'){
                    var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                    config.url = config.url+separator+'noCache=' + new Date().getTime();
                }
                console.log(config.method);
                console.log(config.url);
                return config;
           }
       };
});

you should remove console.logs after verifying