JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<div ng-controller="MainCtrl">
<img ng-if="vis" width="150" height="150" ng-src="{{imgSrc}}">
<div ng-if="vis" class="container" back-img="{{imgSrc}}"></div>
<button ng-click="toggleVis()">Click me twice after the change</button>
</div>
</div>
CSS
.container {
border:solid 1px #CCC;
width:150px;
height:150px;
float:left;
}
JavaScript
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope, $timeout) {
$scope.vis = true;
$scope.toggleVis = function () {
$scope.vis = !$scope.vis;
}
$scope.imgSrc = "http://thesaleswhisperer.com/wp-content/uploads/2013/06/happy-smiley-face-150x150.png";
$timeout(function () {
$scope.imgSrc = "http://ec.l.thumbs.canstockphoto.com/canstock13767058.jpg";
}, 2000);
});
app.directive('backImg', function(){
return function(scope, element, attrs){
attrs.$observe('backImg', function(value) {
element.css({
'background': 'transparent url(' + value +')'
});
});
};
});