Angular JS-Data loading data from local file

Question

I have an ionic app using angular and JS-Data that when running on a mobile device should load data from downloaded JSON files.

I am bundling the files with the app in the www folder and copying into the relevant storage folder depending on the type of device. Once the files have been copied, if there is an internet connection, the app tries to get the most recent data from a CDN, save the new data in the JSON files and reads the new data from the JSON files the into JS-Data so the user is shown the new data.

This all works except the bit after the files are saved and the user is shown the new data, they are shown the old cached data. Logging out the data before saving to the file shows the right data, and loading the file using $cordovaFile shows the right data, the path to the files is correct and all debugging is pointing to JS-Data correctly fetching the data the second time.

appData
    .loadData (basePath)
    .then (() => {
        assetsFactory
            .backgroundUpdate ()
            .then (basePath => appData.loadData (basePath, true))
    })

where basePath is the absolute link to the folder the files are stored in, then in the loadData function

appData.loadData = (basePath, bypassCache) => $q ((resolve, reject) => {
    if (bypassCache === undefined) {
        bypassCache = false
    }

    let options = {
        basePath,
        bypassCache,
        cacheResponse : true,
    }
    ....
    Area.findAll ({}, options)
        .then (areas => {
            console.log (areas)
        })
   ....
})

console.log (areas) shows the old data from the file, but using the exact code above, if I change the basePath variable to link that got the new remote data then console.log (areas) shows the new updated data.
Any ideas what I'm doing wrong that I'm not bypassing the cache?

Answer 1

so far the best way I found to resolve this is to call getData from state resolve,

$stateProvider.state ('app', {
    ...
    resolve : {
         load : (appFactory) => appFactory.getData ()
    }
})

getData originally triggered the backgroundUpdate function on complete, as there is another router for the logged in views, I removed backgroundUpdate from the getData function and added to the logged in router resolve as below

 $stateProvider.state ('app.home', {
    url : '/home',
    abstract : true,
    controller : 'HomeController as _home',
    templateUrl : homeTemplate,
    data : {
        role : USER_ROLES.user,
    },
    resolve : {
        load : (appFactory) => appFactory.backgroundRefresh (),
    },
})

This is the only way I found that actually shows the new data in the console.log in loadData, but sure there is a much more elegant solution