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.noteMatrix[0]">{{$index+1}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="track in machine.noteMatrix">
<td>--</td>
<td ng-repeat="step in track">
<input type="checkbox" ng-model="track[$index]"> {{step}}
</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.noteMatrix[0]">{{$index+1}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="track in machine.noteMatrix">
<td>--</td>
<td ng-repeat="step in track">
<input type="checkbox" ng-model="step"> {{step}}
</td>
</tr>
</tbody>
</table>
<button ng-click="printMatrix()">Show Matrix!</button>
</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]
];
$scope.machine = machine;
$scope.printMatrix = function() {
var out = '';
for(i = 0; i < 3;i++) {
out += i+ ": ";
for(j = 0; j < 3; j++) {
out += machine.noteMatrix[i][j] + " ";
}
out += "\r\n";
}
alert(out);
};
});