0

I've an angularJS app. I've a page with the following template and controller:

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

The two controllers:

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)
    };
}

So basically, I've a parent and a child controller; Clicking the button in the child controller emits an event with the message "updatedyy". This is picked up the $on in the parent controller which sets the value of $rootScope.food to the message value.

Now my question is, is it possible to see this value change of a variable in all instances of the app? For example, if I've the app (running on a Tomcat server) open in two tabs in my browser, and I click on the button - is it possible to get a changed value in the other tab as well?

codewarrior
  • 984
  • 4
  • 18
  • 34
  • 1
    Each tab is a separate instance so the only way I see is by using the server to notifying both instances(say using sockets.io) or to store the var in localstorage which both instances watch – caffeinated.tech Mar 24 '14 at 22:10
  • Thanks! Guess it has to be done using a server notification. – codewarrior Mar 25 '14 at 01:31

0 Answers0