子状态更改时，Angular重新加载父控制器

Question

I am a newbie to angular JS and IONIC.

I have left side menu: - Menu 1 - Menu 2 - Menu 3

And right side menu dynamically change based on the selected left menu.

I successfully did this. But, the problem is when i change to other Menu, my right side menu won't be updated before i refresh the page (using F5).

Whats wrong with my code:

controller.js

angular.module('starter.controllers', [])

    .controller('AppCtrl', function ($state, $scope, $stateParams) {
        var source = $stateParams.source;
        $scope.title = source;
        $scope.data = {items: []};

        if (source == 'Menu1') {
           $scope.data.items.push({url: source + '/AAA', label: "AAA"});
           $scope.data.items.push({url: source + '/BBB', label: "BBB"});
           $scope.data.items.push({url: source + '/CCC', label: "CCC"});
        }
        if (source == 'Menu2') {
           $scope.data.items.push({url: source + '/EEE', label: "EEE"});
        }
        if (source == 'Menu3') {
           $scope.data.items.push({url: source + '/FFF', label: "FFF"});
        }
    })

    .controller('NewsListCtrl', function ($scope, $stateParams) {

    })
;

app.js

.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider

            .state('app', {
                url: "/app/:source/:channel",
                templateUrl: "templates/layout.html",
                controller: 'AppCtrl'
            })
            .state('app.newsList', {
                url: "/news-list",
                views: {
                    'menuContent': {
                        templateUrl: "templates/news-list.html",
                        controller: 'NewsListCtrl'
                    }
                }
            })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/Menu1/AAA/news-list');

    });

layout.html

<ion-side-menus enable-menu-with-back-views="false">>
    <ion-side-menu-content>
        ...
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <ion-list>
                <ion-item menu-close href="#/app/Menu1/AAA/news-list">
                    AAA
                </ion-item>
                <ion-item menu-close href="#/app/Menu2/EEE/news-list">
                    EEE
                </ion-item>
                <ion-item menu-close href="#/app/Menu3/FFF/news-list">
                    FFF
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

    <ion-side-menu side="right">
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-repeat="item in data.items" href="#/app/{{item.url}}/news-list">
                    {{item.label}}
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Answer 1

Since the parent controller doesn't get re-created when the child state changes, you could have the parent controller listen for $stateChangeSuccess and update the menu based on the state params:

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

https://github.com/angular-ui/ui-router/wiki#state-change-events