Confirm navigation message using angularjs states (loading route before confirm message)

[Julie Kirwin]

I posted this already on stack overflow, but wasn't really getting anywhere.

He is what the post says:

Following some examples I have found online, I am trying to implement a confirm navigation message when using back button or clicking on links and such on my site.

I am using angularjs states to switch between pages. I have followed what most all solutions said to do and put this code in my controller that encompasses all my settings to handle the confirm navigation:

$scope.$on('$locationChangeStart', function (event, next, current) {
        if (!confirm('Are you sure you want to leave this view?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            event.preventDefault();
        }
    });

However, this is not working the way I expected. It seems its loading the new page before asking to confirm navigation

Here is a screenshot immediately after I click a new link (was on Trailers, clicked Shop Shifts): 

Here is a pic of what happens when I press cancel (see it still loads shop shit but shows trailers as selected link and url): 

Not really sure how to get it to display the message before the changing of pages. Has anyone ran into this issue before? Any ideas on how to fix it?? Thanks!