Angular Gallery

HTML

<div id="imageGalleryPage" ng-app="galleryApp" ng-controller="GalleryCtrl"  ng-attr-style="background-color: pink;">    
    <span id="searchHolder">
        <label for="galleryQuery">Search:</label>
        <input id="galleryQuery" ng-model="query">
    </span>
    <span id="orderHolder">
        <label for="orderGallery">Sort by:</label>
        <select id="orderGallery" ng-model="orderProp">
          <option value="caption">Alphabetical</option>
          <option value="date">Newest</option>
        </select>
    </span>
    <span id="zoomHolder">
        <label for="galleryZoom">Zoom:</label>
        <input id="galleryZoom" ng-model="zoomSize" type="range" min="1" max="7"/>
    </span>
    <div id="imageGallery">
        <div class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp" ng-attr-style="transition: .3s ease; width: {{thumbWidth}}px; height: {{thumbWidth}}px;">
            <div class="photoClass" data-id="{{photo.id}}" ng-attr-style="background-image:url({{zoomSize < 5 ? photo.thumb_url : photo.medium_url}})"></div>
            <div class="caption">{{photo.caption}}</div>
            <div class="caption">{{photo.date}}</div>
        </div>
    </div>
</div>

CSS

.photoHolder {
    display: inline-block;
    border: 4px solid #fff;
    text-align: center;
    box-sizing: border-box;
}

.photoClass {
    display: inline-block;
    background: #eee;
    box-sizing: border-box;    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    border: 4px solid #dfe2e2;
}

.caption {
    overflow: hidden;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

function rand(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var myApp = angular.module('galleryApp', []);

myApp.controller('GalleryCtrl', function ($scope, $http) {
    var caption = '';
    var photos = [];
    for (var i = 0; i < 5; i++) {
        
        var tmp = new Date(1310000000000 + (rand(0,2317410007)));
        var dateString = tmp.toDateString();
        switch (rand(0,2)) {
            case 0 : caption = 'IMG' + rand(1000,9999);
                break;
            case 1 : caption = 'Image ' + rand(30,999);
                break;
            case 2 : caption = 'DSC' + rand(1000,9999);
                break;
        }
        var width = rand(150,250);
        var height = rand(150,250);
        
        photos.push({id: i, date: dateString, caption: caption,
            thumb_url : 'http://placekitten.com/' + width + '/' + height,
            medium_url : 'http://placekitten.com/' + (width*2) + '/' + (height*2)
            });
    }
    
    
    $scope.photos = photos;
    
    $scope.zoomSize = 4;
    $scope.getWidth = function() {
        return document.getElementById('imageGallery').offsetWidth;
    };
    $scope.$watch($scope.getWidth, function(newValue, oldValue) {
        $scope.thumbWidth = newValue / (17 - ($scope.zoomSize * 2));
    });
    $scope.$watch('zoomSize', function(newValue) {
        $scope.thumbWidth = $scope.getWidth() / (17 - (newValue * 2));
    });
    window.onresize = function(){
        $scope.$apply();
    };
    $scope.query = '';    
    $scope.orderProp = 'caption'
    
});