<div class="widget-content ng-cloak"> <div class="padd"> <div class="ng-load-indicator" ng-show="isPayInvoicesLoading"></div> <div class="alert alert-info" ng-show="alertType === 'info'"> <i class="icon-info-sign icon-2x"></i> {{ alertMessage }} </div> <table id="payInvoicesTable" ng-show="payInvoices" class="table table-bordered table-hover table-list"> <thead data-search:table-header data-table="payInvoicesTable" data-search="search()"> </thead> <tbody> <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow"> <td class="col-md-2"> <input type="checkbox" ng-model="result.isToBePaid" data-no:dirty-check ng-change="payChange(result)" /> </td> <td class="col-md-2"> <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a> </td> <td class="col-md-5"> {{result.descrip}} </td> <td class="col-md-12 col-lg-12"> {{result.dateCreated |date: 'medium'}} </td> <td class="col-md-4"> <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span> </td> <td class="col-md-4"> <input type="number" name="payment" ng-model="result.payment" id="payment" ng-disabled="!result.isToBePaid" ng-class="{'negative-amount' : result.payment < 0}" min="0" data-no:dirty-check data-sm:number placeholder=" 000.00" data-sm:number-format data-accuracy="2" /> <div class="field-validation-error"> <span ng-show="payInvoicesRow.payment.$error.min">Payment should not be negative.</span> </div> </td> </tr> </tbody> <tfoot> <tr> <td class="col-md-2"></td> <td class="col-md-2"></td> <td class="col-md-5"></td> <td class="col-md-12 col-lg-12">@String.Format(Labels.totalX, ":")</td> <td class="col-md-4"><span ng-class=" {'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td> <td class="col-md-4">{{total('payment')|currency}}</td> </tr> </tfoot> </table> </div>Attached is the picture of how this looks like.