Angular UI-Router: child using parent’s view

Sounds like you simply don’t want the views to be hierarchical. To do this, simply change the name of the second state to detail.

Note however, that in doing so you will lose any hierarchical properties of the state tree (the controller code state of accounts for example).

If you want to keep the controllers hierarchical, but perform a replace of the html, I would create another parent above both others that takes care of the controller logic, but only has an extremely simple view <div ui-view=""></div>.

For example:

$stateProvider
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });