1 files changed, 83 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc b/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc
new file mode 100644
index 00000000..b258f867
--- /dev/null
+++ b/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc
@@ -0,0 +1,83 @@
+@workInProgress
+@ngdoc overview
+@name Developer Guide: Scopes: Understanding Scopes
+@description
+
+
+Angular automatically creates a root scope during initialization, and attaches it to the page's
+root DOM element (usually `<html>`). The root scope object, along with any of its child scope
+objects, serves as the infrastructure on which your data model is built. The data model (JavaScript
+objects, arrays, or primitives) is attached to angular scope properties. Angular binds the property
+values to the DOM where bindings are specified in the template. Angular attaches any controller
+functions you have created to their respective scope objects.
+
+
+<img src="img/guide/simple_scope_final.png">
+
+
+Angular scopes can be nested, so a child scope has a parent scope upstream in the DOM.  When you
+display an angular expression in the view, angular walks the DOM tree looking in the closest
+attached scope object for the specified data. If it doesn't find the data in the closest attached
+scope, it looks further up the scope hierarchy until it finds the data.
+
+
+A child scope object inherits properties from its parents. For example, in the following snippet of
+code, observe how the value of `name` changes, based on the HTML element it is displayed in:
+
+
+<doc:example>
+<doc:source>
+ <ul ng:init="name='Hank'; names=['Igor', 'Misko', 'Gail', 'Kai']">
+   <li ng:repeat="name in names">
+           Name = {{name}}!
+   </li>
+ </ul>
+<pre>Name={{name}}</pre>
+</doc:source>
+<doc:scenario>
+   it('should override the name property', function() {
+     expect(using('.doc-example-live').repeater('li').row(0)).
+       toEqual(['Igor']);
+     expect(using('.doc-example-live').repeater('li').row(1)).
+       toEqual(['Misko']);g/@
+
+
+     expect(using('.doc-example-live').repeater('li').row(2)).
+       toEqual(['Gail']);
+     expect(using('.doc-example-live').repeater('li').row(3)).
+       toEqual(['Kai']);
+     expect(using('.doc-example-live').element('pre').text()).
+       toBe('Name=Hank');
+   });
+</doc:scenario>
+</doc:example>
+
+
+The angular {@link api/angular.widget.@ng:repeat ng:repeat} directive creates a new scope for each
+element that it repeats (in this example the elements are list items). In the `<ul>` element, we
+initialized `name` to "Hank", and we created an array called `names` to use as the data source for
+the list items. In each `<li>` element, `name` is overridden. Outside of the `<li>` repeater, the
+original value of `name` is displayed.
+
+
+The following illustration shows the DOM and angular scopes for the example above:
+
+
+<img src="img/guide/dom_scope_final.png">
+
+
+
+
+## Related Topics
+
+
+* {@link dev_guide.scopes Angular Scope Objects}
+* {@link dev_guide.scopes.working_scopes Working With Scopes}
+* {@link dev_guide.scopes.controlling_scopes Applying Controllers to Scopes}
+* {@link dev_guide.scopes.updating_scopes Updating Scopes}
+
+
+## Related API
+
+
+* {@link api/angular.scope Angular Scope API}