AngularJS scope variable value change not reflecting across controllers

Question

In my angularjs, i have two controllers and use the variable which is referred in UI. From UI I am calling method OpenPage of NumTwoController which updates value of variable1 and NumOneController tries to access updated value.

After I update the variable in NumTwoController, newly updated value is not reflecting in NumOneController and also in NumOne.html page.

myModule.controller('NumOneController', ['$rootScope', '$scope', 
    function ($rootScope, $scope) {
        $scope.variable1 = 1; // initial value assigned
        
        $scope.$on('NumOne', function (e, opt) {
            var valueselected = $scope.variable1; //still 1 is assigned.trying to read the value assigned in NumTwoController
        });
    }
    ]);


myModule.controller('NumTwoController', ['$rootScope', '$scope', 
    function ($rootScope, $scope) {
        $scope.variable1 = [];
        
        $scope.OpenPage = function (menuItem, PageReload){
            $scope.variable1 = 2;       
        });
    }
    ]);

I tried adding $scope.$apply() but didnt succeed.

Guidance to reflect the updated value in the another controller is much appreciated

user services to share data between controllers. – maverickosama92 Jun 29 '20 at 15:20 — maverickosama92, Jun 29 '20 at 15:20

score 3 · Answer 1 · answered Jun 29 '20 at 14:11

You cannot directly access the variable of scope of one controller to another. You can make use broadcast and on functions or angular service for sharing the scope between two controllers.

check out this =>

Share data between AngularJS controllers

https://benohead.com/blog/2016/07/18/angularjs-sharing-data-controllers/

AngularJS scope variable value change not reflecting across controllers

1 Answers1