Creating an HTML form using ng-repeat to generate form elements from an object in the scope is a common practice. However, issues may arise when trying to update values outside of the ng-repeat block.
Here's a basic example:
<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>
It seems that while the <p> tags inside the ng-repeat block update correctly when modifying input values, the <p> tags in block2 do not reflect these changes.
This leads to questions about the behavior of ng-repeat and whether it creates its own isolated scope. Understanding this could help in finding a solution to ensure that the controller level scope updates properly. Additionally, analyzing the logic behind this behavior and exploring potential advantages it offers would be beneficial.
To investigate further, refer to this JSFiddle that demonstrates the issue.