eventman/angular_app/events-list.html

<!-- show a list of Events -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <form class="form-inline">
                <div class="form-group">
                    <label for="query-events">Search:</label>
                    <input type="text" id="query-events" class="form-control" placeholder="Event title" ng-model="query">
                </div>
                <div class="form-group">
                    <label for="events-order">Sort by:</label>
                    <select id="events-order" class="form-control" ng-model="orderProp">
                        <option value="title">Alphabetical</option>
                        <option value="begin-datetime">Date</option>
                    </select>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <td><strong>Event</strong></td>
                <td><strong>Actions</strong></td>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="event in events | filter:query | orderBy:orderProp">
            <td>
                <span><strong><a href="/#/events/{{event._id}}">{{event.title}}</a></strong></span>
                <p>Begins: {{event['begin-datetime']}}<br/>
                Ends: {{event['end-datetime']}}</p>
            </td>
            <td>
                <button ng-click="remove(event._id)" type="button" class="btn btn-link glyphicon glyphicon-trash" aria-hidden="true"></button>
            </td>
        </tr>
        </tbody>
    </table>
</div>