Updating AngularJS Model of table inserts new cell and removes another -

i had interesting problem today angularjs thought post:

in application have model create html table using ng-repeat, additionally have input field tied model , have registered watch function model. when enter text input field, function writes text selected cell of table.

once function completed wired happened. instead of updating value of selected cell, new 1 inserted @ current position , cells shifted right , last cell removed row. have expected cells stayed current position , child elements updated.

here short example of code. model:

//the model initialized empty strings, later input supplied user $scope.master.rows = [["", "", ""], ["", "", ""], ["", "", ""]]; 

the html snippet:

<table ng-model="master.rows">     <tr ng-repeat="row in master.rows">         <td ng-repeat="col in row"             ng-click="master.click($event.target)">{{ col }}</td>     </tr> </table> 

when click function executed, current cell set in scope such watch function can retrieve x , y index , use update model:

$scope.$watch("master.attributes", function (value) {     var x = $scope.master.current[0].cellindex;     var y = $scope.master.current[0].parentnode.rowindex;     $scope.master.rows[y][x] = value; }); 

it turned out behavior because writing directly model object. changed model little contain objects , wrote value object member instead. new model looked this:

$scope.master.rows = [[{value: ""}, {value: ""}, {value: ""}],                       [{value: ""}, {value: ""}, {value: ""}],                       [{value: ""}, {value: ""}, {value: ""}]                      ]; 

in html snippet changed expression to:

<td ng-repeat="col in row" ng-click="master.click($event.target)">{{ col.value }}</td> 

in watch function:

$scope.master.rows[y][x].value = value;