angularjs - AngularJS - $emit でアプリのすべてのインスタンスを更新する

Question

私はangularJSアプリを持っています。次のテンプレートとコントローラーを含むページがあります。

<div ng-controller="ParentCtrl">
    <p>{{food}}</p>
    <div ng-controller="ChildCtrl">
        <button ng-click="onBtnClk()">{{buttonTitle}}</button>
    </div>
</div>

2 つのコントローラー:

app.controller('ParentCtrl', ParentCtrl);
ParentCtrl.$inject = ['$scope','$rootScope'];
function ParentCtrl($scope,$rootScope) {
    $rootScope.food = "hi"
    $rootScope.$on("UPDATE_PARENT", function(event,msg) {
        $rootScope.food = msg;
        console.log("Witnessed")
    });
}

app.controller('ChildCtrl', ChildCtrl);
ChildCtrl.$inject = ['$scope','$rootScope'];

function ChildCtrl($scope,$rootScope) {
    $scope.buttonTitle="Update Parent"
    $scope.onBtnClk = function() {
        $rootScope.$emit("UPDATE_PARENT","updatedyy");
        console.log($rootScope)
    };
}

つまり、基本的に、親コントローラーと子コントローラーがあります。子コントローラーのボタンをクリックすると、メッセージ「updatedyy」を含むイベントが発行されます。これは、$rootScope.food の値をメッセージ値に設定する親コントローラーの $on で取得されます。

私の質問は、アプリのすべてのインスタンスで変数のこの値の変化を見ることは可能ですか? たとえば、(Tomcat サーバーで実行されている) アプリをブラウザーの 2 つのタブで開き、ボタンをクリックした場合、他のタブでも変更された値を取得できますか?