ng-model as a variable in a bidimensional array - angularjs

Question

<p ng-repeat="row in matrix">
<span ng-repeat="column in row">
<input type="text" style="width: 20px; text-align: center;" ng-model="column" ng-change="{{column = }}">
</span>
</p>
And on my controller:
$scope.matrix = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
I have little piece of code and I want that little text input box to be associated with matrix[i][u]. I know I can use ng-model= to make the text box be associated with a certain variable.
However, I want it to go both ways - changing the variable will change the text box value and changing the text box value will change the variable. However, when I have ng-model on an input text box I can't seem to edit its value, as it'll always "reset" to its default.
I know I can use ng-change but I made the middle line this:
<input type="text" style="width: 20px; text-align: center;" ng-model="column" ng-change="update">
And it didn't work to call the $scope.update() function. I also still can't edit the text box value.
tl;dr: How can I have a text box with an ng-model and allow editing it to edit both the text box value and the variable on ng-model.

Answer 1

Use it this way:
<input type="text" ng-model="matrix[$index][$parent.$index]" style="width: 20px; text-align: center;" />
Example: http://jsfiddle.net/cherniv/hcLVE/
It is not very elegant , but it is working..

Answer 2

Here's a directive approach which is a little more fun:
app.directive("matrix", function($compile){
return{
scope:{
ngModel:'='
},
restrict:"E",
link:function(scope, element, attributes){
var render = function(){
var template="";
scope.ngModel.forEach(function(row, r){
template+="<p>";
console.log(scope.ngModel[r]);
row.forEach(function(column, c){
template+='<span><input style="width: 20px; text-align: center;" ng-model="ngModel['+r+']['+c+']"></span>';
});
template+="</p>";
});
element.html(template);
$compile(element.contents())(scope);
}
render();
scope.$watch('ngModel', render, true);
}
}
});
which can be used <matrix ng-model="matrix"></matrix>
Just because I love directives. Running here: http://plnkr.co/edit/jI7Hi9LKXnDFBd0gXtNZ?p=preview

Answer 3

Use
row[$index]
as the ng:model in the input tag:
<input type="text" ng-model="row[$index]" style="width: 20px; text-align: center;" />
The reason why this works and using column does not work is this: The <input> tag will create a child scope by copying the parent scope. But column is a simple/scalar variable. Such a variable will really just be copied. Therefore you end up with a copy in ng:model which is not connected to the real variable in your matrix. This is the reason why the AngularJS people stress that you should always have something with a dot inside referenced by ng-model.
On the other hand, row is still a complex variable (Array) and not a scalar. Such a variable is "copied" by JavaScript not by creating a real copy but by just copying the reference to the data. So you end up with a second reference to the same data. And therefore row in the child-scope created by the <input> tag is still connected to the original row data in the matrix and two-way data-binding will work.
To stress this again: Never use something without a dot as ng:model. AngularJS used to have bad examples doing this on their webpage but it appears that they have mostly/all been changed. But as you can see in this example something foo[5] is also ok, because it still references a complex variable. foo["bar"] would actually be equal to foo.bar.