title: nested table using ng-repeat
body: <p>What I'm trying to do is repeat three levels.</p>
  
  <p>Demo: <a href="http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview">http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview</a></p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;Block&lt;/td&gt;
        &lt;td&gt;Column&lt;/td&gt;
        &lt;td&gt;Unit&lt;/td&gt;
        &lt;td&gt;Action&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody ng-repeat="block in building.ownBlock"&gt;
      &lt;tr ng-repeat="column in block.ownColumn"&gt;
        &lt;td&gt;{{block.name}}&lt;/td&gt;
        &lt;td&gt;{{column.number}}&lt;/td&gt;
        &lt;td&gt;{{unit.name}} - ? empty&lt;/td&gt;
        &lt;td&gt;&lt;button ng-click="edit(unit)"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>but I have failed to do so.</p>
  
  <p>Collection</p>
  
  <pre><code>$scope.building =
  {
    id: 1,
    name: 'first',
    ownBlock: [
        {
          id: 1,
          name: 'Block 1',
          ownColumn: [
              {
                id: 1,
                number: 'Column 1-1',
                ownUnit: [
                    {
                      id: 1,
                      number: 'Unit 1-1-1'
                    },
                    {
                      id: 2,
                      number: 'Unit 1-1-2'
                    }
                  ]
              },
              {
                id: 2,
                number: 'Column 1-2',
                ownUnit: [
                    {
                      id: 3,
                      number: 'Unit 1-2-3'
                    },
  
                    {
                      id: 4,
                      number: 'Unit 1-2-4'
                    }
                  ]
              }
            ]
        },
        {
          id: 2,
          name: 'Block 2',
          ownColumn: [
              {
                id: 3,
                number: 'Column 2-3',
                ownUnit: [
                    {
                      id: 5,
                      number: 'Unit 2-3-5'
                    },
                    {
                      id: 6,
                      number: 'Unit 2-3-6'
                    }
                  ]
              },
              {
                id: 4,
                number: 'Column 2-4',
                ownUnit: [
                    {
                      id: 7,
                      number: 'Unit 2-4-7'
                    },
  
                    {
                      id: 8,
                      number: 'Unit 2-4-8'
                    }
                  ]
              }
            ]
        }
      ]
  };
  </code></pre>
  
  <p>Using KnockoutJS I could use virtual repeaters eg.</p>
  
  <pre><code>&lt;!-- ko foreach: items --&gt;
      &lt;li data-bind="text: $data"&gt;&lt;/li&gt;
  &lt;!-- /ko --&gt;
  </code></pre>
  
  <p>I coded a directive, but 'ng-click="edit(unit)"' just doesn't work.
  Maybe because I'm using element.replaceWith(html); to replace the directive HTML.</p>
  
  <p>Any help is much appreciated.
  Thank you</p>