JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div class="row" ng-controller="ImageCtrl">
    <div class="col-md-3" ng-repeat="release in releases">
        <div class="release" ng-click="getVersions(release)">
            <h1>{{release.title}}</h1>
            <img class="img-responsive" height="100" width="100" ng-src="{{release.image}}" />
            <ul>
                <li ng-repeat="version in release.versions">{{version.format}}</li>
            </ul>
        </div>
    </div>
</div>

CSS

.release {
    padding: 20px;
    width: 250px;
    border:2px solid transparent;
}

.release:hover {
    border:2px solid red;
}

JavaScript

(function () {
    function ImageCtrl($scope, fakeService) {
        var _this = this;
        this.fakeService = fakeService;
        this.$scope = $scope;
        
        fakeService.getReleases()
        .then(function (releases) {
            $scope.releases = releases;
        });
        
        this.$scope.getVersions = function(release){
            _this.getVersions(release);
        };
    }
    
    ImageCtrl.$inject = ['$scope', 'fakeService'];
    
    ImageCtrl.prototype.getVersions = function (release) {
        this.fakeService.getVersions(release.id)
        .then(function (versions) {
            release.versions = versions;
        });
    };

    var fakeService = function ($q, $timeout) {
        this.$q = $q;
        this.$timeout = $timeout;
    };

    fakeService.$inject = ['$q', '$timeout'];

    fakeService.prototype.getReleases = function () {
        var def = this.$q.defer();
        var releases = [{
            id: 1,
            title: 'Star Wars',
            image: 'http://icons.iconarchive.com/icons/artua/star-wars/256/Master-Joda-icon.png'
        }, {
            id: 2,
            title: 'Sharknado',
            image: 'https://pbs.twimg.com/profile_images/2848443715/eeadb0e735d672286a85abac6408a3f8.jpeg'
        }];

        this.$timeout(function () {
            def.resolve(releases);
        }, 300);

        return def.promise;
    };

    fakeService.prototype.getVersions = function (id) {
        var def = this.$q.defer();
        var versions = {
            "1": [{
                format: 'BlueRay'
            }, {
                format: 'DVD'
            }],
                "2": [{
                format: 'VHS'
            }, {
                format: 'BETAMAX'
            }]
        };

        this.$timeout(function () {
            def.resolve(versions[id]);
        }, 300);

        return def.promise;
    };

    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

 ...