Developer Guide: Scopes: Understanding Scopes

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

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.

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:

 <ul ng:init="name='Hank'; names=['Igor', 'Misko', 'Gail', 'Kai']">
   <li ng:repeat="name in names">
           Name = {{name}}!
   </li>
 </ul>
<pre>Name={{name}}</pre>
   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']);

     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');
   });

The angular 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:

Related Topics

Related API