JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js"></script>
<div ng-app='TestApp' ng-controller="TestCtrl">1. Updates the noteMatrix in the controller correctly, but produces errors in the javascript console :(
<table>
<thead>
<tr>
<th>--</th>
<th ng-repeat="no in machine.noteMatrix2[0]">{{$index+1}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="track in machine.noteMatrix2">
<td>--</td>
<td ng-repeat="step in track">
<input type="checkbox" ng-model="track[$index].value">{{step.value}}</td>
</tr>
</tbody>
</table>
<br>2. Produces no errors, but doesn't update the noteMatrix in the controller correctly :'(
<table>
<thead>
<tr>
<th>--</th>
<th ng-repeat="no in machine.noteMatrix2[0]">{{$index+1}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="track in machine.noteMatrix2">
<td>--</td>
<td ng-repeat="step in track">
<input type="checkbox" ng-model="step.value">{{step.value}}</td>
</tr>
</tbody>
</table>
<h3>SHOWING MATRIX REAL TIME!</h3>
<pre>{{ machine.noteMatrix2 | json }}</pre>
</div>
JavaScript
var mod = angular.module('TestApp', []);
mod.controller('TestCtrl', function ($scope) {
var machine = {};
machine.noteMatrix = [
[false, false, false],
[false, true, false],
[false, false, false]
];
machine.noteMatrix2 = [
[{
value: false
}, {
value: false
}, {
value: false
}],
[{
value: false
}, {
value: true
}, {
value: false
}],
[{
value: false
}, {
value: false
}, {
value: false
}]
];
$scope.machine = machine;
});