How come subobjects do not get the two-way binding:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
angular.module('app', []).controller('testCtrl', function($scope) {
$scope.doc = { "foo": "bar", "baz": { "zab": "rab" }}
})
</script>
</head>
<body>
<form ng-controller="testCtrl">
<label><span>Foo</span><input ng-model="doc.foo"></label>
<fieldset>
<legend>Baz</legend>
<label ng-repeat="(key,val) in doc.baz">
<span>{{key}}</span><input ng-model="val">
</label>
</fieldset>
<pre><code>{{doc | json}}</code></pre>
</form>
</body>
</html>
If I edit the foo
, I can see it update. But if I edit the zab
, I cannot see any changes.
Is there some way to make this work, and if not, another data construct (like baz
being an array of objects) which could be made to work?