invoice.display.html

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sd-12">
            <button class="btn btn-default" type="button" title="Edit" ng-click="editInvoice()">Edit</button>
            <span ng-show="error">Error: {{error}}</span>
         </div>
    </div>
    <form>
    <div id="invoiceDiv" class="row">
        <h2>Invoice: {{invoice.reference}}</h2>
        <div class="col-md-4 col-sd-12">
            <div class="form-group">
                <input type="hidden" ng-model="invoice.id"" id="invoiceid" />
                <label for="invoiceReference">Invoice Reference</label>
                <input type="text" disabled  ng-model="invoice.reference"  class="form-control" id="invoiceReference" placeholder="Please enter Invoice Reference">
            </div>
            <div class="form-group">
                <label for="invoiceDate">Date</label>
                <input type="date" disabled ng-model="invoice.invoiceDate"  class="form-control" id="invoiceDate" placeholder="Please enter Invoice Date">
            </div>
            <div class="form-group">
                <label for="vatRate">Vat Rate</label>
                <input type="number" disabled ng-model="config.vatRate" class="form-control" id="vatRate">
            </div>
            <div class="form-group">
                <label for="clientName">Agency</label>
                <input type="text" disabled ng-model="invoice.agencyName" class="form-control" id="companyName" placeholder="Please provide the name of the agency.">
                <label for="clientName">Agency Contact</label>
                <input type="text" disabled ng-model="invoice.agencyContact" class="form-control" id="companyName" placeholder="Please provide the name of the agency contact.">
            </div>
        </div>
        <div class="col-md-4 col-sd-12">
            <div class="form-group">
                <label for="clientName">Client</label>
                <input type="text" disabled ng-model="invoice.companyName" class="form-control" id="companyName" placeholder="Please provide the name of the client.">
            </div>
            <div class="form-group">
                <label for="clientContact">Contact Name</label>
                <input type="text" disabled ng-model="invoice.contact" class="form-control" id="clientContact" placeholder="Please provide the name of the contact at the clients.">
            </div>
            <div class="form-group">
                <label for="addressLine1">Address</label>
                <input type="text" disabled ng-model="invoice.addressLine1" class="form-control" id="addressLine1">
                <input type="text" disabled ng-model="invoice.addressLine2" class="form-control" id="addressLine2">
                <input type="text" disabled ng-model="invoice.addressLine3" class="form-control" id="addressLine3">
                <input type="text" disabled ng-model="invoice.addressLine4" class="form-control" id="addressLine4">
            
                <label for="addressCity">City</label>
                <input type="text" disabled ng-model="invoice.addressCity" class="form-control" id="addressCity" />
                <label for="addressPostCode">Postcode</label>
                <input type="text" disabled ng-model="invoice.addressPostCode" class="form-control" id="addressPostCode">
                <label for="addressCountry">Country</label>
                <input type="text" disabled ng-model="invoice.addressCountry" class="form-control" id="addressCountry">
            </div>
        </div>
    </div>
    <div class="well">
        <table class="table table-striped">
            <tr>
                <th>
                    Description
                </th>
                <th>    
                    Unit Type
                </th>
                <th>    
                    Quantity
                </th>
                <th>    
                    Amount
                </th>
                <th>    
                    Line Total
                </th>
                    
            </tr>
            <tbody>
            <tr ng-repeat="invoiceLine in invoice.invoiceLines">
                <td>
                    <input disabled class="form-control" type="text" ng-model="invoiceLine.description" placeholder="Provide description">
                </td>
                <td>    
                    <select disabled class="form-control"ng-model="invoiceLine.unitType" id="invoiceUnit">
                        <option ng-repeat="unitOption in config.unitTypes" value="{{unitOption.name}}">{{unitOption.name}}</option>
                    </select>
                </td>
                <td>    
                    <input disabled class="form-control"  type="number" ng-model="invoiceLine.unitQuantity">
                </td>
                <td>    
                    <input disabled class="form-control"  type="number" ng-model="invoiceLine.unitValue" ng-change="invoiceLine.updateLineTotal()">
                </td>
                <td>    
                    <p class="form-control-static">{{invoiceLine.lineTotal}</p>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</form>
</div>