I am using angular js and ui router.
I am creating a wizard and I setup my ui-router with named views as below:
 .state('app.common.import', {
                url: '/import/:type',
                views: {
                    '': {
                        controller: 'ImportCommonCtrl',
                        templateUrl: 'views/tmpl/import/common.html'
                    },
                    'method@app.common.import': {
                        controller: 'ImportCommonCtrl',
                        templateUrl: 'views/tmpl/import/common/method.html'
                    },
                    'result@app.common.import': {
                        templateUrl: 'views/tmpl/import/common/result.html',
                        controller: 'ImportResultCtrl',
                    },
                    'upload@app.common.import': {
                        controller: 'ImportUploadCtrl',
                        templateUrl: 'views/tmpl/import/common/upload.html',
                        resolve: {
                            plugins: ['$ocLazyLoad', function ($ocLazyLoad) {
                                return $ocLazyLoad.load([
                                    'scripts/vendor/filestyle/bootstrap-filestyle.min.js'
                                ]);
                            }]
                        }
                    }
                }
            })
My issue is that all the controllers are loaded when I access to the url /import/:type ...
I would like to load the controller when the view is displayed.
I have tried $rootScope .$on('$viewContentLoaded', function(event, viewConfig) {
But it doesn't work. Is there a way to do this?
Thanks,