AngularJS ui-router initial route

Question

I have a page that contains 2 different sub-pages.

The search state is the main container and search.list automatically when that loads.

When a user navigates to search.detail it will invoke the last route which is till contained within search main frame.

Problem is I can't get search.list to load by default.

    $stateProvider.state('search', {
        url: '/search/{appId}{reportId:(?:/[^/]+)?}',
        templateUrl: 'app/search/search.tpl.html',
        controller: 'SearchCtrl',
        resolve: {
            app: function($stateParams, AppsModel) {
                return AppsModel.findOne($stateParams.appId);
            }
        }
    });

    $stateProvider.state('search.list', angularAMD.route({
        controller: 'ListCtrl',
        templateUrl: 'app/search/list/list.tpl.html'
    }));

    $stateProvider.state('search.detail', {
        url: '/detail/{recordId}',
        title: "Search",
        views:{
            '': {
                templateUrl: 'app/search/detail/detail.tpl.html',
                controller: 'DetailCtrl'
            },
            'grid@search.detail': {
                controller: 'ListCtrl',
                templateUrl: 'app/search/list/list.tpl.html'  
            },
            'record@search.detail': {
                templateUrl: 'app/record/views/record.html',
                controller: 'RecordCtrl'
            }
        }
        }
    });

If I move the URL and app resolve attribute to search.list the main container doesn't get the app resolved that it needs to render.

If I move the URL attribute only to to search.list search does not have the appId attribute in $state to resolve that.

In my search controller I added:

    if(!$state.is('search.detail')) $state.go('search.list');

but that only works on the first page load, if I goto detail and then go back it doesn't load list because the controller was re'initd. Any ideas?

Answer 1

Ended up consolidating the search and search.list into one like:

    $stateProvider.state('search', {
        url: '/search/{appId}{reportId:(?:/[^/]+)?}',
        title: "Search",
        cssClass: 'SearchCtrl ListCtrl',
        views:{
            '': {
                controller: 'SearchCtrl',
                templateUrl: 'app/search/search.tpl.html',
            },
            '@search': {
                controller: 'ListCtrl',
                templateUrl: 'app/search/list/list.tpl.html'  
            }
        },
        resolve: {
            app: function($stateParams, AppsModel) {
                return AppsModel.findOne($stateParams.appId);
            }
        }
    });