How display array of objects in table using angularjs dynamically?

I am using angular.js for my font-end, node.js for server side and PostgreSQL for database.

Now, I am having some list of values in DB.

Database:

Controller code:

I got below output in console.

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'    
  }
];

Note: For readability I printed only few records in the above array (edited manually), actually it prints all the records.

Expected output in UI:

And also I want to print the sum of Earnings and Deductions in the Total fields in the above table.