Angular.js $scope and dom element

Question

How does angular keep track of which $scope is related to which element? I have a few theories:

1. angular element keeps scope object as property
2. angular saves each scope in cache with the relationship with element
3. angular searches each ng-scope, and magically find element

For example, I have an element with $scope, and I want to change dom hierarchy of this element (moving to outside of the outer controller). How is scope affected by this action?

Answer 1

If you have an angular app, and your HTML looks something like this:

<div ng-controller="OuterController">
    ...
    <div ng-controller="InnerController">
        <div id="wrapper">
            <span>An Element</span>
        </div>
    </div>
</div>

And you move the <span> out of the #wrapper div, it's still within the context of both OuterController and InnerController . However, if you move it up to where the ... is, only the OuterController 's context applies.

Each controller has its own context, and that context extends down into all child-elements recursively, even if a new controller is present, at which point, both controllers are in-scope.

This is true whether the element is moved dynamically with Javascript or otherwise. Angular keeps track of most context internally.