Angular ui-router goes to default state on browser refresh
<p>Here is my ui-router configuration:</p>

<pre><code>    $urlRouterProvider.otherwise('/');

    $stateProvider    
        .state('home', {
            url : '/',
            views : {
                '' : {
                    templateUrl : 'partials/default.ejs',
                    controller : 'DefaultCtrl'          
                },
                'defaultView@home' : {
                    templateUrl : 'partials/table.ejs',
                    controller : 'TenderAppCtrl'
                },
                'detailView@home' : {
                    templateUrl : 'templates/viewtender.ejs',
                    controller : 'TenderDetailCtrl'
                }
            }
        })

        .state('about', {
            url : '/about',
            templateUrl : 'partials/about.ejs',
            controller : 'AboutCtrl'
        })

        .state('settings', {
            url : '/settings',
            templateUrl : 'partials/settings.ejs',
            controller : 'SettingsCtrl'

        })

        //dummy state used for browser back button functionality only
        .state('home.detail', { 
            url : ':id'
        });
</code></pre>

<p>No matter where I refresh my browser, the page goes back to '/' state. For eg. if my current state is '/settings' and if I hit browser refresh, I expect the page to reload the state 'settings' but it jumps back to '/'. It seems like <code>$urlRouterProvider.otherwise('/')</code> is triggered eveytime I refresh the page. I tried setting HTMLmode to false but that didn't work either.</p>