eventman/angular_app/persons-list.html

<!-- show a list of Persons -->
<div class="container">
    <form class="form-inline">
        <div class="form-group">
            <label for="query-persons">{{'Search:' | translate}}</label>
            <input type="text" id="query-persons" class="form-control" placeholder="{{'Name or email' | translate}}" ng-model="query">
        </div>
        <div class="form-group">
            <label for="persons-order">{{'Sort by:' | translate}}</label>
            <select id="persons-order" class="form-control" ng-model="orderProp">
                <option value="name">{{'Alphabetical' | translate}}</option>
                <option value="_id">{{'ID' | translate}}</option>
            </select>
        </div>
        <div class="form-group">
            <button ng-click="$state.go('person.new')" class="btn btn-success">
                <span class="glyphicon glyphicon-plus-sign"></span>
                {{'Add person' | translate}}
            </button>
        </div>
    </form>

    <table class="table table-striped">
        <thead>
            <tr>
                <td><strong>{{'Name' | translate}}</strong></td>
                <td><strong>{{'Actions' | translate}}</strong></td>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="person in persons | filter:query | orderBy:orderProp">
            <td>
                <span><strong><a ui-sref="person.info({id: person._id})"><span>{{person.name}}</span>&nbsp;<span>{{person.surname}}</span></a></strong></span>
                <p>{{person.email}}</p>
            </td>
            <td>
                <button ng-click="remove(person._id)" type="button" class="btn btn-link glyphicon glyphicon-trash"></button>
            </td>
        </tr>
        </tbody>
    </table>
</div>