JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">    
    
        <gal-photo class="photoHolder" ng-repeat="photo in photos"></gal-photo>
    
<div>

CSS

.photoClass {
    display: inline-block;    
    background: transparent no-repeat center center;
    width: 150px;
    height: 150px;
    background-size: cover;
    margin: 5px;
}

JavaScript

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

testApp.controller('testCtrl', function ($scope) {
    $scope.photos = [];
    var degs = [0,90,180,270];
    for (var i = 0; i < 100; i++) {
        rotate = degs[Math.floor(Math.random() * 4)];        
        $scope.photos.push({url: 'http://placekitten.com/100/150',transform:'rotate(' + rotate + 'deg)'});                            
    }
    
    $scope.addRotation = function(event, photo) {
        
        $event = $(event.target);
        var style = $event.attr('style');
        console.log('Style before: ' + style);
        style += photo.photoTransform;
        $event.attr('style',  style);         
        console.log('Style after: ' + style);
    }
});



testApp.directive('galPhoto', function () {
        return {            
            restrict: 'E',
            template:
            '<div class="photoClass" ng-style="{\'background-image\':\'url(\' + photo.url + \')\', \'-webkit-transform\': photo.transform,\'-ms-transform\': photo.transform,transform: photo.transform}" ng-click="addRotation($event, photo)"></div>'
        }
});