title: Modifying objects within Angular Scope inside ng-repeat
body: <p>I'm creating a form in HTML using ng-repeat to generate the form elements from an object in the scope.  I also use that object to generate other elements outside of the ng-repeat.  </p>
  
  <p>A simplified example looks like this in HTML:</p>
  
  <pre><code>&lt;div ng-app="App"&gt;
    &lt;div ng-controller="Ctrl"&gt;
        &lt;div class="block1"&gt;
            &lt;form ng-repeat="(key, value) in test"&gt;
                &lt;label&gt;{{key}}&lt;/label&gt;
                &lt;input ng-model="value" /&gt;
                &lt;p&gt;{{value}}&lt;/p&gt;
            &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="block2"&gt;
          &lt;p&gt;
            {{test.a}}
          &lt;/p&gt;
          &lt;p&gt;
              {{test.b}}
          &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this in JS:</p>
  
  <pre><code>angular.module('App', []);
  
  function Ctrl($scope) {
      $scope.test = {
          a:"abc",
          b:"def"
      }
  }
  </code></pre>
  
  <p>In this example, the text in block2 is set to the initial values of <code>test.a</code> and <code>test.b</code>.  The input values and <code>&lt;p&gt;</code> values inside of the loop are also set to the initial value.</p>
  
  <p>When I modify the values within the inputs, the <code>&lt;p&gt;</code> values inside of the ng-repeat block update correctly, but the <code>&lt;p&gt;</code> tags in block2 fail to update.</p>
  
  <p>Why is this the behavior?  Does ng-repeat create its own isolated scope?  If so how can I get the controller level scope to update?  Also, could somebody explain the thinking behind this  behavior and any advantages it provides?</p>
  
  <p><a href="http://jsfiddle.net/HB5fJ/1/" rel="noreferrer">JSFiddle Showing the problem</a></p>