JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.1/angular.js"></script>
<div ng-app='myModule'>
    <div>
        <ul>
            <li thisclicked data-value="img1">img 1</li>
            <li thisclicked data-value="img2">img 2</li>
        </ul>
    </div>
    <br>
    <div class="find-empty">
        <ul>
            <li class="empty" data-value=""></li>
            <li class="empty" data-value=""></li>
        </ul>
    </div>
</div>

CSS

ul{
    list-style:none;
}

.find-empty li {
     border: 1px solid #ddd; 
    padding: 5px;
}

JavaScript

var myModule = angular.module('myModule', []);
myModule.directive("thisclicked", function () {
var thisclicked = function(scope,element,attrs) {
		element.bind('click',function(){
			var empty = $('.find-empty').find('.empty').first();
            empty.html(element.html());
            empty.attr('data-value',attrs.value);
            empty.removeClass('empty');
        });
	};

return thisclicked;
});