Ich erstelle ein Formular in HTML mit ng-repeat, um die Formularelemente aus einem Objekt im Gültigkeitsbereich zu generieren. Ich benutze dieses Objekt auch, um andere Elemente außerhalb des ng-repeat zu erzeugen.

Ein vereinfachtes Beispiel sieht in HTML folgendermaßen aus:

<div ng-app="App">
  <div ng-controller="Ctrl">
      <div class="block1">
          <form ng-repeat="(key, value) in test">
              <label>{{key}}</label>
              <input ng-model="value" />
              <p>{{value}}</p>
          </form>
      </div>
      <div class="block2">
        <p>
          {{test.a}}
        </p>
        <p>
            {{test.b}}
        </p>
      </div>
  </div>
</div>

und das in JS:

angular.module('App', []);

function Ctrl($scope) {
    $scope.test = {
        a:"abc",
        b:"def"
    }
}

In diesem Beispiel wird der Text in Block 2 auf die Anfangswerte von gesetzttest.a undtest.b. Die Eingabewerte und<p> Werte innerhalb der Schleife werden ebenfalls auf den Anfangswert gesetzt.

Wenn ich die Werte in den Eingaben ändere, wird die<p> Werte innerhalb des ng-repeat-Blocks werden korrekt aktualisiert, aber die<p> Tags in Block2 können nicht aktualisiert werden.

Warum ist das das Verhalten? Erstellt ng-repeat einen eigenen isolierten Bereich? Wenn ja, wie kann ich den Bereich auf Controller-Ebene aktualisieren? Könnte jemand erklären, was hinter diesem Verhalten steckt und welche Vorteile es bietet?

JSFiddle Zeigt das Problem