front/camotion/views/cameras.html

<!-- Page Content -->
<div class="container">

    <div class="col-md-12" lu-busy="camerasView">
        <div class="row">
            <div class="col-sm-3 pull-right cameras-filter-input">
                <input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}"
                       ng-model="query" ng-change="loadPage(0)"/>
            </div>
        </div>

        <div class="row">
            <div ng-repeat="c in cameras" class="col-md-6">
                <figure class="player col-sm-12">
                    <div class="col-sm-12 player-image-wrapper" lu-busy="{group: 'camera_' + c.Id}">
                        <img id="camera_{{c.Id }}" ng-click="playPause(c)" src="img/camera_loading.jpg" class="player-image">
                    </div>
                    <figcaption class="player-legend" title="{{ c.Description }}">
                        <span class="player-button-play" ng-class="{
                            'fui-play': !isPlaying(c),
                            'fui-pause': isPlaying(c)
                        }" ng-click="playPause(c)"></span>
                        <span class="player-legend-name">{{ c.Name }}</span>
                    </figcaption>
                </figure>
            </div>
        </div>
        <div class="col-sm-12 text-center">
            <div class="pagination">
                <ul>
                    <li class="previous">
                            <a href="" class="fui-arrow-left" ng-click="loadPage(page - 1)"></a>
                    </li>
                    <li ng-repeat="p in pages" ng-class="{ 'active' : p == page}">
                            <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a>
                    </li>
                    <li class="next">
                            <a href="" class="fui-arrow-right" ng-click="loadPage(page + 1)"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>