ng-model saving with a recursive display - angularjs

Question

Setup
I have a frontend that displays a JSON. One can edit the values in the JSON via an ng-model textarea with a save button.
It does this by recursively calling an object like this:
In tree-object-edit.html:
...
<h4 class="capitalize">{{ item_key }}: </h4>
<textarea rows="2" cols="60" ng-model="item"></textarea>
<div ng-if="item.properties">
<ul>
<li ng-repeat="(item_key, item) in item.properties" ng-include="'html/tree-object.html'"></li>
</ul>
</div>
This is called by this my-definition.html
<form name="form"
role="form"
novalidate
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength"
ng-controller="MyDefinitionDetailController">
<h4>My Definition Edit: {{myDefinition.name}}</h4>
<ul ng-repeat="(item_key,item) in myDefinition" ng-include="'html/tree-object-edit.html'"></ul>
<button type="submit" ng-click="create()">
<span>Save</span>
</button>
</form>
My my-defintion-detail.controller.js contains
$scope.create = function () {
MyDefinition.save($scope.myDefinition,
function () {
});
};
Problem
Clicking save does not save the myDefintion because myDefiniton has not been changed. Only item has been changed.
Question
Is there a way to make the myDefiniton change when the item "within it" changes?
UPDATE 1
I have found that:
<textarea rows="2" cols="60" ng-model="myDefinition[item_key]"></textarea>
Does work for the first level of the recursion

Answer 1

You correctly noted, that ng-model="myDefinition[item_key]"(parent[key] at my example) works, - changes will reflect into desired model, if you will make them on property level not on direct value. So, besides passing value and key to nested template, you also should pass parent object, that way chain of references from actual value to "head" will be created:
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.value = {
identity: {
name: 'Max',
surName:'Smith',
},
birthDay: {
year: 1990,
month: 2,
day: {
weekDay: 'friday',
number: '13'
}
},
firstLevel: 'abc'
}
$scope.isObject = function(value){
return angular.isObject(value);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<script type="text/ng-template" id="template">
{{key}}
<ul ng-init='temp=value'>
<input ng-if='!isObject(value)' type='text' ng-model='parent[key]'/>
<li ng-if='isObject(temp)' ng-repeat='(key, value) in temp' ng-init='parent=temp' ng-include="'template'"></li>
</ul>
</script>
<ul ng-init='parent=value'>
<li ng-repeat='(key, value) in value' ng-include="'template'"></li>
</ul>
{{value | json}}
</div>

Answer 2

Just to add a perhaps more elegant solution: (Note if you update angular recursive directives also becomes a thing)
angular.module('app', ['dotjem.angular.tree']).controller('ctrl', ['$scope', function($scope) {
$scope.value = {
identity: {
name: 'Max',
surName:'Smith',
},
birthDay: {
year: 1990,
month: 2,
day: {
weekDay: 'friday',
number: '13'
}
},
firstLevel: 'abc'
}
$scope.isObject = function(value){
return angular.isObject(value);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/dotJEM/angular-tree-bower/master/dotjem-angular-tree.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul dx-start-with="value as parent">
<li ng-repeat="(key, value) in parent">
{{key}}
<input ng-if="!isObject(value)" type="text" ng-model="parent[key]"/>
<ul ng-if="isObject(value)" dx-connect="value"></ul>
</li>
</ul>
<pre>{{value | json}}
</pre>
</div>