title: How can I render this irregular table with ng-repeat?
body: <p>Here I have a JSON data as below:</p>
  
  <pre><code>[
  {"teacher":"Tom","student":[{"name":"stuA","project":"projectA"},{"name":"stuB","project":"projectB"}]},
  {"teacher":"Jerry","student":[{"name":"stuC","project":"projectC"},{"name":"stuD","project":"projectD"},{"name":"stuE","project":"projectE"}]},
  {"teacher":"Lee","student":[{"name":"stuF","project":"projectF"}]}
  ]
  </code></pre>
  
  <p>And now I want to render it into an irregular table like the picture:</p>
  
  <p><img src="https://i.stack.imgur.com/YsRE3.png" alt="enter image description here"></p>
  
  <p>So how can I make it possible by using ng-repeat? It's really a confusing problem.
  Here is the html code that makes the table above:</p>
  
  <pre><code>&lt;tr style="height:40px" &gt;
          &lt;td rowspan="2" style="text-align:center;background:#FFD4D4;font-weight:bold;"&gt;Tom&lt;/td&gt;
  
              &lt;td style="text-align:center;font-size:15px;font-weight:bold;"&gt;stuA&lt;/td&gt;
              &lt;td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;"&gt;projectA&lt;/td&gt;
           &lt;/tr&gt;
     &lt;tr style="height:40px;"&gt;
         &lt;td style="text-align:center;font-size:15px;font-weight:bold;"&gt;stuB&lt;/td&gt;
         &lt;td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;"&gt;projectB&lt;/td&gt;
     &lt;/tr&gt;
  
  &lt;tr style="height:40px"&gt;
      &lt;td rowspan="3" style="text-align:center;background:#FFD4D4;font-weight:bold;"&gt;Jerry&lt;/td&gt;
      &lt;td style="text-align:center;font-size:15px;font-weight:bold;"&gt;stuC&lt;/td&gt;
      &lt;td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;"&gt;projectC&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="height:40px;"&gt;
      &lt;td style="text-align:center;font-size:15px;font-weight:bold;"&gt;stuD&lt;/td&gt;
      &lt;td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;"&gt;projectD&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="height:40px;"&gt;
      &lt;td style="text-align:center;font-size:15px;font-weight:bold;"&gt;stuE&lt;/td&gt;
      &lt;td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;"&gt;projectE&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>