I am attempting to dynamically assign ng-model names so that they can be accessed in the controller using '$scope.numbers.no1', '$scope.numbers.no2', and so on. However, my current code is not producing any results:
<div ng-repeat="row in numbersArray" class="numbersRow">
<div ng-repeat="num in row" class="number" ng-model="numbers['no' + num]">{{num}}</div>
</div>
In my controller:
$scope.numbers = {};
$scope.numbersArray = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
[21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
[31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
[41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
[51, 52, 53, 54, 55, 56, 57, 58, 59, 60],
[61, 62, 63, 64, 65, 66, 67, 68, 69, 70],
[71, 72, 73, 74, 75, 76, 77, 78, 79, 80]];
To test, I am running:
$scope.numbers.no1 = 'A';
However, nothing is happening. Can someone identify what mistake I am making?
UPDATE: Upon further investigation, I realized that I mistakenly used an ng-model on a div. What I actually want to accomplish is to randomly select a number from the 80 available numbers and change its background color to black to indicate that it has been selected.