Tworzę formularz w HTML za pomocą ng-repeat, aby wygenerować elementy formularza z obiektu w zakresie. Tego obiektu używam również do generowania innych elementów poza powtórzeniem ng.

Uproszczony przykład wygląda tak w HTML:

<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>

a to w JS:

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

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

W tym przykładzie tekst w bloku 2 jest ustawiony na wartości początkowetest.a itest.b. Wartości wejściowe i<p> wartości wewnątrz pętli są również ustawione na wartość początkową.

Kiedy modyfikuję wartości w wejściach,<p> wartości wewnątrz bloku ng-repeat aktualizują się poprawnie, ale wartości<p> Tagi w bloku 2 nie aktualizują się.

Dlaczego tak się dzieje? Czy ng-repeat tworzy swój własny izolowany zakres? Jeśli tak, jak mogę zaktualizować zakres kontrolera? Czy ktoś mógłby wyjaśnić myślenie, które kryje się za tym zachowaniem i jakie zapewnia korzyści?

JSFiddle Pokazuje problem