Current child state does not load on refreshing the browser

Question

I have a parent state called 'results' and two child states 'results.grid' and 'results.list'.

.state('results', {
            url: '/results',
            templateUrl: 'html/main_listing.html',
            redirectTo: 'results.grid'
        })
        //Child state for results state
        .state('results.grid', {
            templateUrl: 'html/grid_listing.html'
        })
       //Child state for results state
        .state('results.list', {
            templateUrl: 'html/list_listing.html'
        })

main_listing.html has

<a ui-sref="results.grid">Grid</a>
<a ui-sref="results.list">List</a>
<div ui-view></div>

I have used redirectTo and $stateChangeStart to load 'results.grid' by default when 'results' is loaded as given by the accepted answer in this question - ui-router default child state not working.

This works perfectly fine. But when I am on 'results.list' and I reload the page, it does not remain in 'results.list', it gets redirected to 'results.grid'.

How can I prevent this behaviour?