app/components/imagegallery/imageGalleryApp.html

<html ng-app="imageGalleryApp">
    <head>
        <link rel="stylesheet" type="text/css" href="../../../assets/css/pagination.css"/>
        <link rel="stylesheet" type="text/css" href="../../../assets/css/imageGalleryApp.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="imageGalleryController.js"></script>
        <script src="imgurImageSearchService.js"></script>
        <script src="picasaImageSearchService.js"></script>
        <script src="flickrImageSearchService.js"></script>
        <script src="imageSearchServiceFactory.js"></script>
        <script src="imageGalleryAppDirectives.js"></script>
        <script src="instagramImageSearchService.js"></script>
        <script src="../common/paginationService.js"></script>
    </head>
    <body>
        <div class="wrap" ng-controller="ImageGalleryController">
            <div class="page-title">Image Search Gallery</div>
            <div class="search-criteria-container">
                <input type="radio" ng-model="searchCriteria.server" ng-change="searchImages()" value="instagram"/>Instagram
                <input type="radio" ng-model="searchCriteria.server" ng-change="searchImages()" value="imgur"/>imgur
                <input type="radio" ng-model="searchCriteria.server" ng-change="searchImages()" value="picasa"/>Picasa
                <input type="radio" ng-model="searchCriteria.server" ng-change="searchImages()" value="flickr"/>Flickr
                <input type="text" ng-model="searchCriteria.tags" ng-change="searchImages()"
                       placeholder="Enter tags separated by comma" autofocus>
                <input type="radio" ng-model="searchCriteria.mode" ng-change="searchImages()" value="any"/>Any Tags
                <input type="radio" ng-model="searchCriteria.mode" ng-change="searchImages()" value="all"/>All
                Tags
            </div>
            <div class="thumbnails-section">
                <div class="thumbnail-with-meta-data float-left"
                     ng-repeat="image in images | pagination: paginationService.getCurrentPageIndex() * paginationService.getPageSize() | limitTo: paginationService.getPageSize()"
                >
                    <div class="relative-top-left-corner">
                        <img class="thumbnail" ng-src="{{image.lowResolutionLink}}" ng-attr-title="{{image.title}}"
                             ng-mouseenter="mouseOverOnImage($index)" imageonload="setIsThumbnailImageLoaded()">
                        <!--<div class="thumbnail-spinner-container" ng-show="!isThumbnailLoaded()">-->
                            <!--<img class="thumbnail-spinner" ng-src="{{getLoadingImageSource()}}">-->
                        <!--</div>-->
                    </div>
                    <div class="title">
                        <a href="{{image.link}}" ng-attr-title="{{image.title}}">{{image.title}}</a>
                    </div>
                    <div class="author">
                        <a href="{{image.albumLink}}" ng-attr-title="{{image.author}}">by
                            {{image.author}}</a>
                    </div>
                    <div class="tags" ng-attr-title="{{image.tags}}">tags: {{image.tags}}</div>
                </div>

                <div class="text-align-center pagination-container" ng-show="paginationService.showItemsListSection()">
                    <ul class="pagination">
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToFirstPage()" ng-click="paginationService.navigateToFirstPage()"> &lt;&lt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToPreviousPage()" ng-click="paginationService.navigateToPreviousPage()">&lt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToNextPage()" ng-click="paginationService.navigateToNextPage()"> &gt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToLastPage()" ng-click="paginationService.navigateToLastPage();">&gt;&gt;</button>
                        </li>
                    </ul>
                    <span>Page {{paginationService.pagesStatusMessage()}}</span>
                </div>
            </div>

            <div class="image-preview-section" ng-show="paginationService.showItemPreviewSection()">
                <div class="relative-top-left-corner">
                    <img class="image-preview" ng-src="{{getImageSource()}}" imageonload="setIsPreviewLoaded()">
                    <div class="image-preview spinner-container" ng-show="!isPreviewLoaded()">
                        <img class="spinner" ng-src="{{getLoadingImageSource()}}">
                    </div>
                </div>

                <div class="text-align-center">
                    <ul class="pagination">
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToFirstItem()" ng-click="paginationService.navigateToFirstItem()"> &lt;&lt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToPreviousItem()" ng-click="paginationService.navigateToPreviousItem()">&lt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToNextItem()" ng-click="paginationService.navigateToNextItem()">&gt;</button>
                        </li>
                        <li>
                            <button type="button" ng-disabled="paginationService.canNavigateToLastItem()" ng-click="paginationService.navigateToLastItem()"> &gt;&gt;</button>
                        </li>
                    </ul>
                    <span>Image {{paginationService.itemsStatusMessage()}}</span>

                    <div class="resolution-radios">
                        <input type="radio" ng-model="resolution" value="HIGH"/>High-Resolution Preview
                        <input type="radio" ng-model="resolution" value="LOW" ng-value="LOW"/>Low-Resolution Preview
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>