How to access $rootScope value defined in one module into another module

Question

I need to understand "How can I access the value of $rootScope value defined in one module into other module?"

Below is my code :

Index.html

<!DOCTYPE html>
<html ng-app="myapp">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">  </script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="test.js"></script>
</head>

<div ng-controller="serviceDIController">
Service Values is : <b> {{sdiParam}} </b>  <br/>
Factory Values is : <b> {{fdiParam}} </b>  <br/>
Root Scope Values is : <b> {{rootParam}} </b>  
</div>
</html>

script.js

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

app.controller('serviceDIController',['$scope','$rootScope',
'testService','testFactory',function($scope, $rootScope,testService, testFactory) 
{

 $scope.sdiParam = testService.param;
 $scope.fdiParam = testFactory.fparam;
// $scope.rootParam = $rootScope.root;      // How to access "$rootScope.root" value defined in test.js in current module inside a controller?

}
]);

test.js

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

  testapp.service('testService', function() {
  this.param = "Service Param1 DI";
});

testapp.factory('testFactory', function() {

  var fact = {};
  fact.fparam = "Fact Param1 DI";
  return fact;  
});

testapp.controller('testCtrl', ['$scope',
  function($rootScope) {
    $rootScope.root = "Root Scope Param1";
  }
]);

Live demo : http://plnkr.co/edit/X0aamCi9ULcaB63VpVs6?p=preview

Checked below example but did not work:

AngularJS $rootScope variable exists, but not accessible

possible duplicate of [AngularJS Modules/Scope Sharing](http://stackoverflow.com/questions/20751172/angularjs-modules-scope-sharing) — Sergiu Paraschiv, May 23 '14 at 09:20
@Sergiu Paraschiv : I don't think this is the duplicate. I want to access the value of $rootScope instead of $scope in my example. — Siddharth_Vyas, May 23 '14 at 09:22
Same thing. Any `$scope` anywhere is part of a `$rootScope` tree. Read https://docs.angularjs.org/api/ng/service/$rootScope and https://docs.angularjs.org/guide/scope — Sergiu Paraschiv, May 23 '14 at 09:23
Can you check my example. I am not able to access the value of $rootScope. — Siddharth_Vyas, May 23 '14 at 09:24
"*Every application* has _a single root scope_. All other scopes are descendant scopes of the root scope." - "application" means "module". `$rootScope` is the root scope of a module. A controller's `$scope` is a child of the module's, AKA the `$rootScope`. So no, by design you cannot share `$rootScope` between modules. You can however initialize it (http://stackoverflow.com/questions/18880737/how-do-i-use-rootscope-in-angular-to-store-variables) and maybe set it to some value persisted in a service, as described in the duplicate. — Sergiu Paraschiv, May 23 '14 at 09:30
Thanks a lot..Now its working .I made a mistake in my demo app.In test.js , i neede to inject $rootScope instead of $scope inside [] brackets. — Siddharth_Vyas, May 23 '14 at 09:37
EDIT NEEDED: Title should switch "module" for 'controller' -- this is communication between CONTROLLERS -- NOT -- "MODULES". — Cody, Dec 08 '14 at 20:20
@SergiuParaschiv - Application does not mean module. Application refers to `ng-app` https://docs.angularjs.org/api/ng/directive/ngApp. All modules depended on the one declared in `ng-app` share the same $rootScope — aaaaaa, Sep 03 '15 at 22:06
Let me rephrase that, don't know why I wrote it that way, should have been more clear. What he means by "module" is actually described as "application" in the official documentation. — Sergiu Paraschiv, Sep 04 '15 at 07:16

score 3 · Accepted Answer · answered May 23 '14 at 09:35

Explicitly inject '$scope', not '$rootScope' in testCtrl, so a new scope is created just for that controller and passed as the first argument regardless of the name used for that argument.

Incorrect:

testapp.controller('testCtrl', ['$scope',
  function($rootScope) {
    $rootScope.root = "Root Scope Param1";
  }
]);

Correct:

testapp.controller('testCtrl', ['$rootScope',
  function($rootScope) {
    $rootScope.root = "Root Scope Param1";
  }
]);

score 2 · Answer 2 · answered May 23 '14 at 09:40

2

Here is your updated working Plunkr

Basically I prefer to use $scope.$root to prevent the injection of the $rootScope.

You have also set the testCtlr on the <head> tag, don't know if it was on purpose or not.

answered May 23 '14 at 09:40

Preview

35,317
10
92
112

How to access $rootScope value defined in one module into another module

2 Answers2

Linked