AngularJS uiRouter access controller from other view

Issue

I have simple hierarchical state:

angular
    .module('App.Module.Suppliers', [])
    .config(function($stateProvider) {
        return $stateProvider
            .state('suppliers', {
                url: '/suppliers',
                views: {
                    main: {
                        templateUrl: 'views/layouts/wrapper.html'
                    }
                }
            })
            .state('suppliers.edit', {
                url: '/:id',
                views: {
                    entity_view: {
                        templateUrl: 'views/layouts/foo.html'
                    }
                }
            })
            .state('suppliers.edit.details', {
                url: '/edit',
                views: {
                    entity_sub_view: {
                        controller: function () {
                            this.foo = {bar: "TEST HEADER"};
                        },
                        controllerAs: 'vm',
                        templateUrl: 'views/layouts/main.html'
                    }
                }
            });
    });

main and entity_view views are generic for all entities and only entity_sub_view changes with core information.

---

Now in entity_view I want to use some value like <h2>{{vm.foo.bar}}</h2> but it seems that I can't access vm inside these parent states.

Is there a way to pass this and other parameters to parent states to use?

Solution

So I found solution that fits my need. Basically you can set controllerAs to top-most state and access it via $scope:

angular
    .module('App.Module.Suppliers', [])
    .config(function($stateProvider) {
        return $stateProvider
            .state('suppliers', {
                url: '/suppliers',
                views: {
                    main: {
                        templateUrl: 'views/layouts/wrapper.html'
                        controller: function () {
                            this.foo = null;
                        }
                        controllerAs: 'mainCtrl'
                    }
                }
            })
            .state('suppliers.edit', {
                url: '/:id',
                views: {
                    entity_view: {
                        templateUrl: 'views/layouts/foo.html'
                    }
                }
            })
            .state('suppliers.edit.details', {
                url: '/edit',
                views: {
                    entity_sub_view: {
                        controller: function () {
                            this.foo = {bar: "TEST HEADER"};
                        },
                        controllerAs: 'vm',
                        templateUrl: 'views/layouts/main.html'
                    }
                }
            });
    });

And in some controller do

this.$scope.mainCtrl.foo = {bar: "TEST HEADER"};

In view

{{mainCtrl.foo.bar}}

Answered By - Justinas