title: using ng-repeat inside another ng-repeat
body: <p>I'm developing a page where I need to show some boxes (using <code>ng-repeat</code>) that contains info of channels and where it will be shown (which are cities).</p>
  
  <p>The problem I am facing is when I repeat the second <code>ng-repeat</code>:</p>
  
  <pre><code>&lt;table class="table table-condensed" ng-init="nitsCh = [objsCh[$index].nit]"&gt;
  </code></pre>
  
  <p>This should get the $index of first ng-repeat and create a new array with the places the channels will be shown. And it does exactly that. But, when I apply the second ng-repeat using this array, it doesn't work properly.</p>
  
  <p>Said that my html looks like this (PS: I need to use the index value instead of <code>objCh.name</code> because I place these boxes into columns)</p>
  
  <pre><code>&lt;div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0  &amp;&amp; indexO&lt;=10"&gt;
    &lt;div class="box-header"&gt; 
      &lt;div class="pull-left"&gt; 
        &lt;img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal"&gt; 
        &lt;h3 class="box-title"&gt;{{ objsCh[(indexO)].name }}&lt;/h3&gt; 
      &lt;/div&gt; 
      &lt;div class="box-tools pull-right"&gt; 
        &lt;button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt; 
      &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="box-body"&gt; 
      &lt;table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]"&gt; 
        &lt;tbody&gt; 
          &lt;tr&gt; 
            &lt;th style="width: 10px"&gt;#&lt;/th&gt; 
            &lt;th&gt;Nit&lt;/th&gt; 
          &lt;/tr&gt; 
          &lt;tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN"&gt; 
            &lt;td&gt;{{ objsCh[(indexO + 1)].nit[indexN].num }}&lt;/td&gt;
            &lt;td&gt;{{ objsCh[(indexO + 1)].nit[indexN].name }}&lt;/td&gt;
          &lt;/tr&gt; 
        &lt;/tbody&gt;
      &lt;/table&gt; 
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS file looks like this:</p>
  
  <pre><code>var app = angular.module('appApp', []);
  app.controller('ctrlApp', function($scope, $http) {
  
      var url = "includes/exibChNit.php";
  
      $http.get(url).success(function(response) {
          all = response;
          $scope.objsCh = all.channels;
      });
  });
  </code></pre>
  
  <p>And the json file (that php create) looks like this:</p>
  
  <pre><code>{
      "channels": [{
          "id": "1",
          "sid": "1",
          "name": "Channel",
          "pic": "channel.jpg",
          "crc32": "A1g423423B2",
          "special": "0",
          "url": "",
          "key": "",
          "type": "",
          "city": [{
              "num": "1",
              "name": "S�o Paulo"
          }, {
              "num": "2",
              "name": "Rio de Janeiro"
          }]
      }, {
          "id": "2",
          "sid": "2",
          "name": "CHannel 1",
          "pic": "channel.jpg",
          "crc32": "A1F5534234B2",
          "special": "0",
          "url": "",
          "key": "",
          "type": "",
          "city": [{
              "num": "1",
              "name": "S�o Paulo"
          }, {
              "num": "2",
              "name": "Rio de Janeiro"
          }]
      }]
  }
  </code></pre>
  
  <p>When I try this it works:</p>
  
  <pre><code>&lt;table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]"&gt;
  </code></pre>
  
  <p>But I can't make it this way because the json nodes will be dynamic.</p>
  
  <p>Thanks in advance!</p>