JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
    <div my-create-content grid="grid" class="container"></div>
</div>

JavaScript

var app = angular.module("app", []);
app.directive('myCreateContent', ['$timeout', function ($timeout) {

    function link(scope, element, attrs) {

        scope.showImg = false;

        function updateImg(url) {
            scope.imageUrl = url;
            scope.showImg = true;
        }

        if (scope.grid[0].imageUrl) {
            updateImg(scope.grid[0].imageUrl);
            $timeout(function () {
                scope.showImg = false;
            }, scope.grid[0].duration);
        }

    }

    return {
        scope: {
            grid: '='
        },
        template: '<img ng-show="showImg" ng-src="{{imageUrl}}" class="grid">',
        link: link
    };
}]);
app.controller("ctrl", function ($scope) {
    $scope.grid = [{
        imageUrl: "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg",
        duration: 1000
    }, {
        imageUrl: "http://www.online-image-editor.com/styles/2013/images/example_image.png",
        duration: 2000
    }

    ];
});