title: Nested ng-repeat for multidimensional array
body: <p>I am trying to <strong>display a bi-dimensional array in html using the ng-repeat directive</strong>. I can display the first dimension ( table rows) but the second (table datas) is not working. I have seen a lot of solutions using objects, JSON, key-values data structures... But I can't find something that work <strong>for just an array containing others arrays</strong>. Here are some unsuccessful attempts.<br><br>
  <strong>HTML:</strong> (does't work)</p>
  
  <pre><code>&lt;div ng-app = "grid" ng-controller = "gridCtrl"&gt;
      &lt;table&gt;
          &lt;tr ng-repeat = "y in grid"&gt;
              &lt;td ng-repeat = "x in y"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>HTML:</strong> (doesn't work)</p>
  
  <pre><code>&lt;div ng-app = "grid" ng-controller = "gridCtrl"&gt;
      &lt;table&gt;
          &lt;tr ng-repeat = "y in grid"&gt;
              &lt;td ng-repeat = "x in grid[$index]"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>JS:</strong></p>
  
  <pre><code>var grid = angular.module("grid", []);
  grid.controller("gridCtrl", function($scope)
  {
      $scope.grid = [[empty, empty, empty, empty, empty],
                     [empty, empty, empty, empty, empty],
                     [empty, empty, empty, empty, empty],
                     [empty, empty, empty, empty, empty],
                     [empty, empty, empty, empty, empty]];
  });
  </code></pre>