title: How can make 2 columns with table in angular
body: <p>I have this code in angular template which just makes the header on left and data on right from top to bottom.</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
  
          &lt;table class="table table-striped"&gt;
              &lt;tr ng-repeat="f in fields"&gt;
                  &lt;th&gt;{{ f }}&lt;/th&gt;
                  &lt;td&gt;{{ data[f] }}&lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>But instead of one field in one row i want to have 2 fields in one row and 3rd field and 4th field in second row and so on.</p>
  
  <p>so that i have 2 columns layout </p>
  
  <pre><code> &lt;tr&gt;&lt;th&gt;{{ f }}&lt;/th&gt;
   &lt;td&gt;{{ data[f] }}&lt;/td&gt; 
   &lt;th&gt;{{ f }}&lt;/th&gt;
   &lt;td&gt;{{ data[f] }}&lt;/td&gt;
  &lt;/tr&gt;
  
  
  field = ['id', 'name', 'username', 'email', 'age']
  
  data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]
  </code></pre>
  
  <p>The result i want is</p>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;id:&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;name:&lt;/td&gt;&lt;td&gt;john&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;username:&lt;/td&gt;&lt;td&gt;john&lt;/td&gt;&lt;td&gt;age:&lt;/td&gt;&lt;td&gt;20&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>This should be done with ng-repeat rather hard coding stuff</p>