在完全加载大图像之前显示低分辨率图像

Question

我正在使用指令

app.directive('hires', function() {
      return {
        restrict: 'A',
        scope: { hires: '@' },
        link: function(scope, element, attrs) {
          initialLoad = false

          element.bind('load', function() {
            initialLoad = true;
            if(!scope.hires) return;
            element.attr('src', scope.hires);
          });

          attrs.$observe('hires', function(value) {
            if(!value) return;
            if(initialLoad) element.attr('ng-src', value);
          });
        }
      };
    });

它在页面加载时工作正常。但是当我点击按钮然后我尝试添加图像链接然后它不工作。我的代码

 <img hires="{{showpopup_img}}" ng-src="http://asasa.net/thumb/assas/{{deals.image}}" />
showpopup_img when some one click on button then it add image url not on page load.
    $scope.mapcall = function (deals) {
     $scope.showpopup_img='http://asasaas.net/big/publicdeals/'+deals.id+'.jpg';
}