Dynamically updating ng-repeat for matrix - angularjs

Question

I have matrix(2D array) cells in model, what I represent in a table.
<tr ng-repeat='row in cells track by $index'>
<td ng-repeat='cell in row track by $index'>
{{cell}}
</td>
</tr>
I want add a drop down buttons to resize length and width,
<select ng-model="length" >
<option ng-repeat="size in sizes" ng-click="setLength(size)">{{size}} </option>
</select>
but can't refresh ng-repeat. For refresh page I use $scope.$apply() after set new matrix in cells
$scope.cells = new Array($scope.width);
for (var i = 0; i < $scope.cells.length; i++) {
$scope.cells[i] = new Array($scope.length);
for (var j = 0; j < $scope.length; j++) {
$scope.cells[i][j] = 'cell';
}
}
$scope.$apply();
but it doesn't help. How to refresh ng-repeat?
P.S. When user is changing size matrix, it should back to default values with new size.
my demo is here

Answer 1

In your fiddle your 2D array is not created corretly. Please have a look at this SO question for tips how to setup the array.
I've changed these points of your code:
used ng-options for length and width dropdown. That's easier than ng-repeat.
Removed click events from the width and length drop down and added a $watch for width and length scope variables for updating the map.
Updated creation of 2d array.
Below is a working demo of your code or in this fiddle.
var myapp = angular.module('mapApp', []);
myapp.controller('editorController', function ($scope) {
$scope.cells = [
[]
];
$scope.sizes = [];
makeSizes();
$scope.length = $scope.sizes[0];
$scope.width = $scope.sizes[0];
$scope.$watch('[width,length]', makeMap, true);
function makeMap() {
var cols = $scope.width,
rows = $scope.length;
console.log('makeMap');
$scope.cells = matrix(rows, cols, 'cell');
}
function matrix(rows, cols, defaultValue) {
// code from here https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript
var arr = [[]];
// Creates all lines:
for (var i = 0; i < rows; i++) {
// Creates an empty line
arr[i] = [];
// Adds cols to the empty line:
arr[i] = new Array(cols);
for (var j = 0; j < cols; j++) {
// Initializes:
arr[i][j] = defaultValue;
}
}
return arr;
}
makeMap();
function makeSizes() {
for (var i = 0; i < 5; i++) {
$scope.sizes.push(i + 3);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mapApp" ng-controller="editorController">
<label>Length</label>
<select ng-model="length" ng-options="length for length in sizes">
</select>
<table>
<label>Width</label>
<select ng-model="width" ng-options="width for width in sizes">
</select>
<table>
<tbody>
<tr ng-repeat="row in cells track by $index">
<td ng-repeat="cell in row track by $index">
{{cell}}
</td>
</tr>
</tbody>
</table>
</div>