AngularUI Router - Nested abstract routes not working

Question

I'm adapting a template called Pages for an AngularJS app and I'm configuring nested view with the UI Router. It seems that everything is in place but the nested route "app/email" doesn't work, whenever it is called UI Router triggers "app/home" as the otherwise statement.

My code is this:

function($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
        $urlRouterProvider
            .otherwise('/app/home');

        $stateProvider
            .state('app', {
                abstract: true,
                url: '/app',
                templateUrl: "tpl/app.html"
            })
            .state('app.home', {
                url: '/home',
                templateUrl: "tpl/home.html",
                controller: 'HomeCtrl',
                resolve: {
                    deps: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([

                            ], {
                                insertBefore: '#lazyload_placeholder'
                            })
                            .then(function() {
                                return $ocLazyLoad.load([
                                    'assets/js/controllers/home.js'
                                ]);
                            });
                    }]
                }
            })
            .state('app.email', {
                abstract: true,
                url: '/email',
                templateUrl: 'tpl/apps/email/email.html',
                resolve: {
                    deps: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                                'menuclipper',
                                'wysihtml5'
                            ], {
                                insertBefore: '#lazyload_placeholder'
                            })
                            .then(function() {
                                return $ocLazyLoad.load([
                                    'assets/js/apps/email/service.js',
                                    'assets/js/apps/email/email.js'
                                ])
                            });
                    }]
                }
            })
            .state('app.email.inbox', {
                url: '/inbox/:emailId',
                templateUrl: 'tpl/apps/email/email_inbox.html'
            })
            .state('app.email.compose', {
                url: '/compose',
                templateUrl: 'tpl/apps/email/email_compose.html'
            });

    }

Answer 1

An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

check this link for more details about abstract in State Provider.

you can use email state as abstract like below code.

    .state('app.email', {
                abstract: true,
                url: '/email',
                template : '<ui-view></ui-view>'
    })
    .state('app.email.default', {
                url: '/',
                templateUrl: 'tpl/apps/email/email.html',
                resolve: {
                    deps: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                                'menuclipper',
                                'wysihtml5'
                            ], {
                                insertBefore: '#lazyload_placeholder'
                            })
                            .then(function() {
                                return $ocLazyLoad.load([
                                    'assets/js/apps/email/service.js',
                                    'assets/js/apps/email/email.js'
                                ])
                            });
                    }]
                }
            })
            .state('app.email.inbox', {
                url: '/inbox/:emailId',
                templateUrl: 'tpl/apps/email/email_inbox.html'
            })
            .state('app.email.compose', {
                url: '/compose',
                templateUrl: 'tpl/apps/email/email_compose.html'
            });