angularjs - AngularJS Factory After First API call, does not ping server and returns stale data, inside child sticky state

Question

I've been banging my head on this one for days and can't seem to figure it out....

my route looks like this:

$stateProvider.state({
            name: 'core.portfolio',
            url: '/portfolio',
            controller: 'portfolioController',
            controllerAs: 'vm',
            templateUrl: 'app/portfolio/partials/base.html',
            deepStateRedirect: true,
            sticky: true,
            resolve: {
                portfolioPrepService: function (portfolioService) {
                    return portfolioService.getPortfolio();

                },

            }
        }).state({
                name: 'core.portfolio.company',
                url: '/1/:companyId',
                resolve: {
                    companyPrepService: companyPrepService
                },
                views: {
                    'company': {
                        controller: 'CompanyController',
                        controllerAs: 'vm',
                        templateUrl: 'app/portfolio/company/company.tmpl.html'

                    }
                },
            sticky: true,
            deepStateRedirect: true

            }
        );

and my service like so:

function companyService($http, API_CONFIG) {

        var service = {};
        service = {
            getCompany: getCompany
        };
        function getCompany(id) {
            return $http({
                method: 'GET',
                url: API_CONFIG.url + 'companies/' + id + '/?embedded={"round":1}',
                cache: false
            })
        }
        return service;


    }

When i make an API call in my CompanyController, companyService.getCompany(companyId) the service returns a stale object, and when i look at my server logs, i don't see any REST calls being made.

When i refresh the page, the api call is made again (as per the PrepService), but when triggered on the CompanyController, it returns the stale data, with no REST hit on the server.

Does anyone have any idea why this is happening? Does it have something to do with the resolves or perhaps that it's in a sticky state?

Answer 1

$http return a promise, So try doing it like this,

companyService.getCompany(companyId).then(function(res){
  console.log(res)
})

And check you network tab of developer tool for any request

Answer 2

It seems like according to this issue, here is a hack in how to solve the problem:

$http disabling caching does not work #1586

var req = {
 method: 'GET',
 url: 'http://example.com',
 headers: {
    'Cache-Control' : 'no-cache'
 }
}

You have to call each API call with these headers. Add this to each call and flush your cache. Should work swimingly thereafter.