owner-details.template.html

<h2>Owner Information</h2>

<table class="table table-striped">
    <tr>
        <th class="col-sm-3">Name</th>
        <td><b>{{$ctrl.owner.firstName}} {{$ctrl.owner.lastName}}</b></td>
    </tr>
    <tr>
        <th>Address</th>
        <td>{{$ctrl.owner.address}}</td>
    </tr>
    <tr>
        <th>City</th>
        <td>{{$ctrl.owner.city}}</td>
    </tr>
    <tr>
        <th>Telephone</th>
        <td>{{$ctrl.owner.telephone}}</td>
    </tr>
    <tr>
        <td>
            <a class="btn btn-info" href="#!/owners/{{$ctrl.owner.id}}/edit">Edit Owner</a>
        </td>
        <td>
            <a href="#!/owners/{{$ctrl.owner.id}}/new-pet" class="btn btn-success">Add New Pet</a>
        </td>
    </tr>
</table>

<h2>Pets and Visits</h2>

<div ng-repeat="pet in $ctrl.owner.pets">
    <h3>{{pet.name}}</h3>
    <p>
        {{pet.birthDate | date:'yyyy MMM dd'}} - {{pet.type.name}}
    </p>
    <h4>Visits</h4>
    <p style="margin-left: 2em;" ng-repeat="visit in pet.visits">
        <span style="font-style: italic; margin-right: 1em;">{{visit.date | date:'yyyy MMM dd'}}</span>
        {{visit.description}}
    </p>

    <p style="margin-left: 2em;" ng-if="pet.visits.length == 0">
        No visit yet
    </p>

    <hr/>
</div>