Not getting translation texts when refreshing (using ui-router)

[enriquein]

I'll preface all of this by saying that this is our first time working with ui-router, so it could very well be a configuration error on our side. That being said, we're experiencing an issue where whenever the user hits "Refresh" while browsing a child state, the translation texts return blank. Once the user navigates to another state (whether child or parent), then the translations appear. This doesn't happen if the user is on a parent state and hits "Refresh".

I tried changing some of our translate-once attributes to translate to make sure the issue wasn't with translate, but it seems to work with regular translate just fine.

Here's how our app is configured:

angular
    .module("ourApp", ["ui.router", "pascalprecht.translate"])
    .config(["$stateProvider", "$urlRouterProvider", "$translateProvider", 
        function($stateProvider, $urlRouterProvider, $translateProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
           // all the states
        ;

        $translateProvider.useStaticFilesLoader({
            prefix: "./static/lang/locale-",
            suffix: ".json"
        });

        $translateProvider.useSanitizeValueStrategy('escapeParameters');
    }])
    .run(["$translate", function($translate) {
            $translate.use("en_US"); // hardCoded for example purposes
    }]);

Am I missing something? Is this a bug? Any other info I can provide to help resolve the issue?

[enriquein]

Turns out it was a sort of race condition. To fix it, all I had to do was add a root state that waited until the $translate.use() promise was resolved before returning the child states.