present nested data in table using angularjs
<p>Using angular 1.4.7</p>

<p>I have the following javascript object</p>

<pre><code>var parents = [
    {"name" : "John", 
         childs:[{ "name" : "Child1", age:"4"},{"name" : "Child2",age:"8"}]},
    {"name" : "Peter", 
         childs:[{ "name" : "Child3", age:"5"},{"name" : "Child", age:"12"}]}
]
</code></pre>

<p>and I want to have the following output as html table</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Child1&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;Child2&lt;/td&gt;
        &lt;td&gt;8&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Peter&lt;/td&gt;
        &lt;td&gt;Child3&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;Child3&lt;/td&gt;
        &lt;td&gt;12&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>I have been trying using ng-repet-start to insert a new row (<code>&lt;/tr&gt;&lt;tr&gt;</code>) within the child loop.</p>

<pre><code>&lt;tr ng-repeat-start="parent in parents"&gt;
    &lt;td &gt;
        {{parent.name}}
    &lt;/td&gt;
    &lt;td ng-repeat-start="child in parent.childs"&gt;
        {{child.name}}
    &lt;/td&gt;
    &lt;td&gt;
        {{child.age}}
&lt;!--new row within child loop and --&gt;
&lt;/tr&gt;
&lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td ng-repeat-end&gt;&lt;/td&gt;
&lt;tr ng-repeat-end&gt;&lt;/tr&gt;
</code></pre>

<p>The error I get in the console is:</p>

<blockquote>
  <p>Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.</p>
</blockquote>

<p>If I take out the <code>&lt;/tr&gt;&lt;tr&gt;</code> I get no error, but also not the desired output.</p>