Reload page on browser back/forward button in AngularJS with ui router

Question

I have the following config for ui router state in my angularjs app.

    $locationProvider.html5Mode(true);
    $stateProvider
        .state('index', {
            url: '/index?zoom&center',
            views: {
                'map': {
                    controller: 'MapCtrl',
                    templateUrl: 'map.html'
                }
            },
            reloadOnSearch:false
    });

However, the back forward button in the browser go to different url, but I need to reload the page with the urls as stateParams.

For example: User1 go to page http://www.example.com/index?zoom=2&center=1,2. then he does bunch operation in the page, the url becomes http://www.example.com/index?zoom=12&center=3,4

Then he presses the back button, the url changes to the previous one, but I need to reload my page to let the controller read the query parameters to do the right thing...

Any way to let it work with browser back/forward?

Answer 1

Have you tried setting reloadOnSearch to true? If that doesn't suite your needs, perhaps check out this question: Force AngularJS to reload a route although option reloadOnSearch is set to false

A simpler alternative may be to just force the reload with window.location = newUrl whenever necessary.