AngularJS | On refreshing the browser, angularjs templates load before the security context. How to stop it?

In my angularjs app(using angular-ui), on refreshing the browser, the templates are being loaded of the particular state before the security context is being fetched from the server. $http call for getting the security context is being hit but since it is asynchronous, they are not set yet.

What is the best way to tackle this problem ?

And also, I have been trying to do the following :

//on the state change event from refresh

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    console.log("state change has started");
    if(fromState.name === '' && fromState.url === '^'){
        console.log("inside state change from refresh");
        //what needs to be done in this block to let the security context is fetched (should I use $timeout etc.) ?
           .........
           .........
    }
});