I have written a directive that renders screenshot of a page, if a screenshot is available else it shows a placeholder. 

```
commonDirectives.directive("showScreenShot", function () {
return {
    restrict: 'A',
    replace: true,
    scope:{},
    link: function(scope, element, attrs){
        var template = '';
        if(attrs.url){
            template += '<div><img src=' + attrs.url + '></div>';
        }
        else{
            template += '<div class="placeholder"></div>'
        }
        element.replaceWith(template)
    }
}
})

```

It is able to render the image properly the first time but the second time rendering fails. It is unable to show the image. I don't understand why it is unable to render image even though the image url points to right image.

**UPDATE**

What if I want to do something like re-render an image after a timewait of say 10 secs, I can't use $watch because the URl remains the same, but the image at the given url gets updated after 10 secs:

```
commonDirectives.directive("showScreenShot",['$timeout', function ($timeout) {
return {
    restrict: 'A',
    replace: true,
    scope:{
        url: '@'
    },
    template: '<div ng-if="!url" class="dbimg placeholder">' +
    '<div class="phicons">' +
    '   <i class="phicn icon2-bars-3 p1"></i>' +
    '   <i class="phicn icon2-stats p2"></i>' +
    '   <i class="phicn icon2-graph p3"></i>' +
    '   <i class="phicn fa fa-table p4"></i>' +
    '</div>' +
    '</div>',
    link: function(scope, ele, attrs) {
        var template;
        if(attrs.url){
            template = '<div class="snapshotmsg">Generating preview ...</div><div class="dbimg placeholder">';
            $timeout(function () {
                template = '<div class="db_img"><img ng-src="' + attrs.url + '"></div>'
                ele.replaceWith(template)
            }, 10000);
            ele.replaceWith(template)
        }
    }
}

```

}]);