<h2>Owners</h2>

<form onsubmit="javascript:void(0)" style="max-width: 20em; margin-top: 2em;">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search Filter" ng-model="$ctrl.query" />
    </div>
</form>

<table class="table table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th class="hidden-sm hidden-xs">Address</th>
        <th>City</th>
        <th>Telephone</th>
        <th class="hidden-xs">Pets</th>
    </tr>
    </thead>

    <tr ng-repeat="owner in $ctrl.owners | filter:$ctrl.query">
        <td>
            <a href="#!/owners/{{owner.id}}">
                {{owner.firstName}} {{owner.lastName}}
            </a>
        </td>
        <td class="hidden-sm hidden-xs">{{owner.address}}</td>
        <td>{{owner.city}}</td>
        <td>{{owner.telephone}}</td>
        <td class="hidden-xs"><span ng-repeat="pet in owner.pets">{{pet.name + ' '}}</span></td>
    </tr>
</table>