Angularjs - set default child view to ui-view - angularjs

Question

I followed this example to set up a page with 2 child views.
I have everything in place now, and if I click on the specific link, the subviews are displayed as expected.
Here's my app.js file, in which you can see all of my states:
$stateProvider.state('app',
name: 'app'
url: '/app'
abstract: true
templateUrl: './sections/menu/menu.tpl.html'
).state('app.home',
name: 'home'
url: '/home'
templateUrl: './sections/Home/Home.tpl.html'
).state('app.details',
name: 'appDetails'
url: '/details/:zoneID'
templateUrl: './sections/zoneDetails/zoneDetails.tpl.html'
controller: 'currentZoneFilter'
).state('app.details.overview',
name: 'appDetailsOverview'
url: '/details/:zoneID'
templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html'
).state('app.details.edit',
name: 'appDetailsEdit'
url: '/details/edit/:zoneID'
templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html'
).state('app.setup',
name: 'setup'
url: '/setup'
templateUrl: './sections/setup/setup.tpl.html'
).state 'app.about',
name: 'about'
url: '/about'
templateUrl: './sections/about/about.tpl.html'
controller: 'info'
$urlRouterProvider.otherwise 'app/home'
as you can see, I have app.details, app.details.overview, app.details.edit.
app.details is the parent, and here's the page code:
This it the parent page
<a ui-sref="app.details.edit">Show edit</a>
<a ui-sref="app.details.overview">Show overview</a>
<div ui-view></div>
If I click on the link, the right template and page section is displayed. My question here is: How can I have Overview loaded by default when I reach this page?
I had a look at $urlRouterProvider.when, that I think that .when is good if you have a different URL.
My URL should be details/:zoneID for the page with overview template loaded and details/edit/:zoneID when the edit template is loaded, so I think that .when is not a good approach. Any help? thanks

Answer 1

You have to use the rule function of $urlRouterProvider.
$urlRouterProvider.rule(function ($injector, $location) {
// check if the location is the desired location then move to the //new location.
});

Answer 2

At the end, I finally solved this.
I changed state URLs for app.details / app.details.overview / app.details.edit like this:
.state('app.details',
name: 'appDetails'
url: '/:zoneID'
templateUrl: './sections/zoneDetails/zoneDetails.tpl.html'
controller: 'currentZoneFilter'
.state('app.details.overview',
name: 'appDetailsOverview'
url: '/details'
templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html'
.state('app.details.edit',
name: 'appDetailsEdit'
url: '/edit/day:day'
templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html'
so that now the URL starts with the zoneID and then it appends the details or edit to display the right template.

Answer 3

Here are a couple way. Check https://github.com/angular-ui/ui-router/wiki for implementation details.
Listen for the $StateChangeStart event. If this matches your state, perform a redirect. Be sure to execute event.preventDefault() to cancel current route change.
Add a controller to your parent state, it will check the $state.current value and if the value match his state will redirect to the child (this is what i have in my application).
EDIT : as requested in comment :
if($state.current.name != 'app.details'){
$state.go('app.details.overview');
}