Angular scope is shared for all modules and controllers

Question

I have a single page application, which has a root module with about 5 seperate smaller modules.

var rootModule = angular.module('root', ["firstModule", "secondModule", "thirdModule"])

Each module has directives and controllers. Today I discovered that I can access other module and controller scope from all other modules and controllers.

So for example this controller:

thirdModule.controller('ThirdController', ['$scope', function ($scope) {
   alert($scope.title);
}

And in this controller I alert the variable and it works.

firstModule.controller('FirstController', ['$scope', function ($scope) {
   $scope.title = "Hello"
}

So basically I initiate my application with ng-app="root". Is this normal that everything has shared scope, or I have something wrong with my setup?

I thought modules give me code seperation and controllers are singletons with new scope.

possible duplicate of [How to prevent that a scope is shared among directives n Angular?](http://stackoverflow.com/questions/16858862/how-to-prevent-that-a-scope-is-shared-among-directives-n-angular) — Mark Schultheiss, Sep 24 '13 at 11:34
You are right... that should not happen. Can't really think of anything about why and how, but I can confirm that this is some form of bug in your code (or in angular). — Erik Honn, Sep 24 '13 at 13:57
Are the controllers nested in the html? That would cause this to happen. — Erik Honn, Sep 24 '13 at 13:59
@MarkSchultheiss that was the case and solved my issue, can you post it as an answer or such? — Jaanus, Sep 25 '13 at 05:54

score 3 · Answer 1 · edited May 23 '17 at 12:33

Without seeing the HTML it is hard, but I would guess that you controllers are nested in the html? Something like:

<div ng-controller="FirstController">
  <div ng-controller="ThirdController">
  </div>
</div>

Controllers use prototypical inheritance when nested. The child inherits from the parent and can access its scope. So ThirdController will in this case be able to access the scope from FirstController. If they where siblings instead of nested then ThirdController would not have access to FirstController.

This is very useful, but there are a few gotchas here that you can fall into if you don't know how this kind of inheritance works, especially when it comes to the difference between inheriting an object and inheriting a primitive (this confused me to no end when I started with Angular).

I can write some more about it if you want and this was indeed what was going on, or you can look at this answer for more about prototypical inheritance: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

This video also demonstrates the difference between objects and primitives when inheriting: http://www.youtube.com/watch?v=DTx23w4z6Kc&feature=player_embedded

Should probably be noted that some of the specifics about directives in the answer I linked to might not be fully accurate for newer versions of angular, things have been changed around a bit, but the all the basics are valid and very good to know. — Erik Honn, Sep 24 '13 at 14:26
Controllers are not nested, but these are controllers for my directives, and as it seems, directives share scope with everything else. — Jaanus, Sep 25 '13 at 05:54

score 2 · Accepted Answer · answered Sep 25 '13 at 16:50

Each module (directive) will need its own (child) scope — either an isolate scope scope: {} or a new scope scope: true to prevent the cross scope issue.

Examples:

// Create new scope:
var scope = $rootScope.$new();  // only one root per application
scope.salutation = 'Hello';
scope.name = 'World';

Inherit, create a new child scope in the parent scope

var parentScope = $rootScope;  // one root per application
var child = parentScope.$new();

parentScope.salutation = "Hello";
child.name = "World";

Here is the documentation on scope:

http://docs.angularjs.org/api/ng.$rootScope.Scope

Here is some documentation on the scope/inheritance:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

In fairness, I would NOT consider myself an "angularjs" expert at this point.

Angular scope is shared for all modules and controllers

2 Answers2

Linked