How to add Cache-control header to $resource in AngularJS

Question

I am trying to bypass aggressive IE10 caching by setting Cache-control header to some of my GET requests.

However, it does not seem to have a desired effect. Below you can find the code I use. Names are sanitised a bit.

service.factory('service', ['$resource',
    function($resource) {
        return $resource(url + '/:year', {year : '@year'},
            {'GET': {
                headers : {
                    'cache-control': 'private, max-age=0, no-cache' }
            }});
    }
]);

Answer 1

I have put the cache control inside my config.

$httpProvider.defaults.headers.common['Cache-Control'] = 'no-cache, no-store, must-revalidate';
$httpProvider.defaults.headers.common['Pragma'] = 'no-cache';
$httpProvider.defaults.headers.common['Expires'] = '0';    

with this, I was able to cache for IE but I had put in module config before config router provider.

---

Updated

may be something like this, I am not totally sure about it. So you can try.

service.factory('service', ['$resource',
    function($resource) {
        return $resource(url + '/:year', {year : '@year'},
            {'GET': {
                headers : {
                    'cache-control': 'no-cache, no-store, must-revalidate',
                    'Pragma' : 'no-cache',
                    'Expires' : '0'
                }
            }});
    }
]);

Answer 2

THe suggested solutions did not help me, but give food for thought. Posting for posterity the config that eventually solved my problem.

var config = {
            headers : {
                "Pragma": "no-cache",
                "Expires": -1,
                "Cache-Control": "no-cache"
            }
        };