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.