Angular UI Router redirect to not keep current state on reload page
<p>I  have this routes:</p>

<pre><code> .state('customers', {
    url: '/customers',
    data: { displayName: 'Customers Management' },
    redirectTo: 'customers.list',
    resolve: {
        loadAsset: ['$ocLazyLoad', ($ocLazyLoad) =&gt; {
            return $ocLazyLoad.load('app/customer/customer.app.js');
        }]
    },
    views: view
})
.state('customers.list', {
    parent: 'customers',
    url: '',
    controller: 'customerCtrl as customer',
    templateUrl: 'app/customer/index.html'
})
.state('customers.detail', {
    parent: 'customers',
    url: '/:id',
    templateUrl: 'app/customer/detail.html',
    controller: 'customerDetailCtrl as customer',
    data: { displayName: 'Customer Profile' }
})
</code></pre>

<p>And my service on $stateChangeStart:</p>

<pre><code>$rootScope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) =&gt; {
     if (toState.redirectTo) {
         event.preventDefault();
         $state.go(toState.redirectTo, toParams);
     }
});
</code></pre>

<p>Here is the problem:</p>

<p>I can access the route finely. It redirect me when I type manually to the url bar to <code>customers.list</code>. And I can get into the detail page normally.</p>

<p>But when I on detail page, and I reload the page it redirect me to <code>customers.list</code>. It supposed to stay at <code>customers.detail</code> on reload. 
Any solution so it can stay at detail page if the state is in detail on reload?. </p>

<p>Thanks in advance!</p>