Pony.fm/public/templates/tracks/index.html

<div layout="row" layout-wrap flex flex-gt-md="50">
    <md-input-container flex flex-xs="50">
        <label>Type</label>
        <md-select ng-model="type" md-on-close="filterDropdownAfterClose(type, 'trackTypes')" multiple>
            <md-option value="any" selected>Any</md-option>
            <md-option ng-repeat="type in ::filters.trackTypes.values track by type.id" value="{{type.id}}">{{::type.title}}</md-option>
        </md-select>
    </md-input-container>

    <md-input-container flex flex-xs="50">
        <label>Show songs</label>
        <md-select ng-model="showSongs" md-on-close="filterDropdownAfterClose(showSongs, 'showSongs')" multiple>
            <md-option value="any" selected>Any</md-option>
            <md-option ng-repeat="song in ::filters.showSongs.values track by song.id" value="{{song.id}}">{{::song.title}}</md-option>
        </md-select>
    </md-input-container>

    <md-input-container flex flex-xs="50">
        <label>Genre</label>
        <md-select ng-model="genres" md-on-close="filterDropdownAfterClose(genres, 'genres')" multiple>
            <md-option value="any" selected>Any</md-option>
            <md-option ng-repeat="genre in ::filters.genres.values track by genre.id" value="{{genre.id}}">{{::genre.title}}</md-option>
        </md-select>
    </md-input-container>

    <md-input-container flex flex-xs="50">
        <label>Has vocals</label>
        <md-select ng-model="isVocal" md-on-close="handleSingularDropdown('isVocal', isVocal)">
            <md-option ng-repeat="item in ::filters.isVocal.values track by $index" value="{{item}}">{{::item.title}}</md-option>
        </md-select>
    </md-input-container>

    <md-input-container flex>
        <label>Order by</label>
        <md-select ng-model="order" md-on-close="handleSingularDropdown('sort', order)">
            <md-option ng-repeat="filter in ::filters.sort.values track by $index" value="{{filter}}">{{::filter.title}}</md-option>
        </md-select>
    </md-input-container>
</div>

<div class="pagination" ng-if="totalPages > 1">
    <ul>
        <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
        <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
            <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
        </li>
        <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
        <li class="pagination-jump">
            <a href="#" ng-click="showPageSelector();" ng-hide="pageSelectorShown" pfm-eat-click>Jump&hellip;</a>
            <form ng-submit="jumpToPage(inputPageNumber)" ng-show="pageSelectorShown">
                <input type="number" id="pagination-jump-destination" ng-model="inputPageNumber" ng-blur="hidePageSelector()" />
                <input type="submit" />
            </form>
        </li>
    </ul>
</div>

<ui-view></ui-view>