AngularJS ui-router/session error handling

Question

I have a single page application utilizing angular and ui-router for our community users on our community site. All works great until their session is invalidated (they logout) or it times out. At which point the remoting function calls will fail (with errors like code 500 Visualforce Remoting Exception: Page not allowed for the profile) which I can likely handle by checking for the statusCode of 500 and redirect to login screen. The bigger concern is how to handle the routing issues. If their session is no longer valid and you hit a route or try to load a view (to show a popup as an example) from the static resource which it can't access without a session (receive a Error: [$compile:tpload] error). This one I think can only be handled with some deep diving into the angular code. I was wondering if anyone had recommendations on handling session timeouts or logouts since unless someone has the JS console open, they wouldn't understand the issue. Thanks!

Answer 1

I had a template I was displaying when there was an error on the remoting calls. I moved that to text/ng-template so it would always be accessible and then detected the statusCode 500 or 402 to display the popup. For the ui-router template error I used a generic error handler to capture the failed template load to display. Might help someone in the future

.run(function($state) { 
    $state.defaultErrorHandler(function(error) { 
        // make noise 
        alert('failed on route');
    }); 
})