Search code examples
javascriptangularjsangular-broadcastangularjs-rootscope

How to access updated value in different page controllers?

I have a problem with getting updated value between in different page controller, Here is the situation.

page1.html

<body ng-app="app">
<div  ng-controller="ctrl1">{{ version }}</div>
</body>

page2.html

<body ng-app="app">
<div  ng-controller="ctrl2">{{ version }}</div>
</body>

app.js

 var app = angular.module("app", []);

 app.run(function($rootScope) {
   $rootScope.Data = [];
   $rootScope.Data.Version = '1.0.0.1';
 });

  app.controller('ctrl1', function($scope, $rootScope){
   $scope.version = $rootScope.Data.Version;
   $rootScope.Data.Version = '1.0.0.2';
  });

 app.controller('ctrl2', function($scope, $rootScope){      
   $scope.version = $rootScope.Data.Version;
 });

Result

version: 1.0.0.1 // page1.html 
version: 1.0.0.1 // page2.html

Expected Result

version: 1.0.0.1 // page1.html 
version: 1.0.0.2 // page2.html

How to achieve this kind situation?

I tried using $broadcast from this tutorial for seprate page controllers: fiddle

Solution

  • You can't just reload pages without losing all your data, you know that? Your $rootScope dies, everything dies... :) Your example is completely wrong. Either use SPA routing which doesn't force browser reload or use some type of local storage for keeping the data safe.

    Also I have noticed that you are binding to primitives $scope.version = $rootScope.Data.Version; - don't do that, use $scope.data = $rootScope.Data; and then {{data.Version}}. Anyway you should not be using $rootScope at all.