title: Populate html Table from values of an json array using ng-if
body: <p>I have an array json as follows</p>
  
  <pre><code>$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];
  </code></pre>
  
  <p>I need to show these data in a table using ng-if where if the age is 1 then that cell should have only data related to age = 1 etc. I used the following code.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;one&lt;/th&gt;
  &lt;th&gt;two&lt;/th&gt;
  &lt;th&gt;three&lt;/th&gt;
  &lt;tr&gt;
      &lt;tr ng-repeat="record in array"&gt;
      &lt;td ng-if="record.age == '1'"&gt;{{record.id}} {{record.name}}&lt;/td&gt;
      &lt;td ng-if="record.age == '2'"&gt;{{record.id}} {{record.name}}&lt;/td&gt;
      &lt;td ng-if="record.age == '3'"&gt;{{record.id}} {{record.name}}&lt;/td&gt;
      &lt;/table&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>But currently all the values are shown in the first column one after the other. I can't figure out the reason.</p>