title: AngularJS: scope of ng-init
body: <p>What is the scope of ng-init in Angular?  Here's a simple example that demonstrates my question:</p>
  <pre><code>&lt;div ng-init=&quot;model = { year: '2013'}&quot;&gt;
      &lt;a href=&quot;&quot; ng-click=&quot;model.year = '2012'&quot;&gt;2012&lt;/a&gt; |
      &lt;a href=&quot;&quot; ng-click=&quot;model.year = '2013'&quot;&gt;2013&lt;/a&gt;
      &lt;div&gt;Showing {{ model.year }}&lt;/div&gt;
      &lt;hr /&gt;
  &lt;/div&gt;
  &lt;div ng-init=&quot;model = { year: '2013'}&quot;&gt;
      &lt;a href=&quot;&quot; ng-click=&quot;model.year = '2012'&quot;&gt;2012&lt;/a&gt; |
      &lt;a href=&quot;&quot; ng-click=&quot;model.year = '2013'&quot;&gt;2013&lt;/a&gt;
      &lt;div&gt;Showing {{ model.year }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Live example available here: <a href="http://plnkr.co/edit/HkioewOzzglvFMKDPdIf?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/HkioewOzzglvFMKDPdIf?p=preview</a></p>
  <p>Is seems that ng-init scope is shared among the 2 <code>div[ng-init]</code>.  For example, if you click on the year '2012' in either section, it changes the <code>year</code> property in both sections.</p>
  <p>Is there a way to tell angular to create a new scope for each ng-init and thereby clicking the '2012' year will only impact the section that it belongs to?</p>