I have list which displays recorded as shown by View A using LINQ but I want the record to display as shown by View B.
Also, I am using angularjs as my binding script using ng-repeat with a table to display the record.
I have included a sample of my code below.
View A:

View B:

Code:
   public IQueryable<PayGrossEntitlement> GetPayrollById(int payrollId, int schoolBranchId, int schoolId)
          {
              var query = from x in _context.Db.tbl_PayGrossEntitlement
                          where x.SchoolId == schoolId && x.SchoolBranchId == schoolBranchId && x.PayrollId == payrollId && x.SalaryComponentId !=6
                          select new PayGrossEntitlement()
                          {
                              SchoolId = x.SchoolId,
                              SchoolBranchId = x.SchoolBranchId,
                              SalaryComponentId = x.SalaryComponentId,
                              SalaryComponentName = x.tbl_SalaryComponent.SalaryComponentName,
                              StaffName = x.tbl_Staff.LastName + " " + x.tbl_Staff.FirstName,
                              Amount = x.Amount,
                              TaxAmount = x.tbl_Staff.tbl_Tax.Count(y=>y.PayrollId == payrollId && y.StaffId == x.StaffId) == 0 ? 0 : x.tbl_Staff.tbl_Tax.FirstOrDefault(y=>y.PayrollId == payrollId && y.StaffId == x.StaffId).Amount,
                              LeaveAmount = x.tbl_Staff.tbl_PaidLeave.Count(y => y.PayrollId == payrollId && y.StaffId == x.StaffId) == 0 ? 0 : x.tbl_Staff.tbl_PaidLeave.FirstOrDefault(y => y.PayrollId == payrollId && y.StaffId == x.StaffId).Amount,
                              LoanAmount = x.tbl_Staff.tbl_PaidLoan.Count(y => y.PayrollId == payrollId && y.StaffId == x.StaffId) == 0 ? 0 : x.tbl_Staff.tbl_PaidLoan.FirstOrDefault(y => y.PayrollId == payrollId && y.StaffId == x.StaffId).Amount,
                              StaffId = x.StaffId,
                              PayrollId = x.PayrollId,
                          };
              return query;
          }
View Template:
<table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th class="table-item-title table-item-w30">Staff Name</th>
                                    <th class="table-item-title table-item-w20">Component</th>
                                    <th class="table-item-title table-item-w20">Component Amount</th>
                                    <th class="table-item-title table-item-w10">Tax</th>
                                    <th class="table-item-title table-item-w10">Loan</th>
                                    <th class="table-item-title table-item-w10">Leave</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="item in payrollByIdItem">
                                    <td>{{item.StaffName}}</td>
                                    <td>{{item.SalaryComponentName}}</td>
                                    <td>{{item.Amount}}</td>
                                    <td>{{item.TaxAmount}}</td>
                                    <td>{{item.LoanAmount}}</td>
                                    <td>{{item.LeaveAmount}}</td>
                                </tr>
                            </tbody>
                        </table>
