title: How display array of objects in table using angularjs dynamically?
body: <p>I am using angular.js for my font-end, node.js for server side and PostgreSQL for database.</p>
  
  <p>Now, I am having some list of values in DB.</p>
  
  <p>Database:</p>
  
  <p><a href="https://i.stack.imgur.com/TuO6B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TuO6B.png" alt="enter image description here"></a> </p>
  
  <p>Controller code:</p>
  
  <p>I got below output in <em><code>console</code></em>.</p>
  
  <pre><code>console.log($scope.items);
  
  $scope.items = [
    {
      salary_head_name : 'BASIC',
      salary_head_value : 15000,
      salary_head_type : 'E'
  
    }, {    
      salary_head_name : 'HRA',
      salary_head_value : 7500,
      salary_head_type : 'E'    
    },{    
      salary_head_name : 'Conveyance',
      salary_head_value : 1600,
      salary_head_type : 'E'    
    },{    
      salary_head_name : 'Med. Allow',
      salary_head_value : 1800,
      salary_head_type : 'E'    
    },{    
      salary_head_name : 'PF',
      salary_head_value : 1800,
      salary_head_type : 'D'    
    }
  ];
  </code></pre>
  
  <p>Note: For readability I printed only few records in the above <code>array</code> (edited manually), actually it prints all the records.</p>
  
  <p>Expected output in UI:</p>
  
  <p><a href="https://i.stack.imgur.com/GLn5G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GLn5G.png" alt="enter image description here"></a></p>
  
  <p>And also I want to print the sum of <code>Earnings</code> and <code>Deductions</code> in the <em>Total</em> fields in the above table. </p>