eventman/angular_app/events-list.html

<!-- show a list of Events -->
<div class="container">
    <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>
        <div class="form-group">
            <button ng-click="$state.go('event.new')" class="btn btn-success">
                <span class="glyphicon glyphicon-plus-sign"></span>
                New event
            </button>
        </div>
    </form>

    <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 ui-sref="event.info({id: 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"></button>
            </td>
        </tr>
        </tbody>
    </table>
</div>