Angularjs- Disable button until image is rendered

Question

I am using angular and I need to enable a button only after the image is rendered completely, not only loaded. I am using angular ng-file-upload with "ngf-thumbnail"

I found this directive in SO, but it doesn´t work.

My button always gets enabled before the image is rendered completely.

As this question was "marked as duplicate by georgeawg" I´d like to say my question is different because no other similar question I found in SO solved my problem. All solutions posted that I found in SO have the same problem.

The other solutions work only to load event, not when the image is completelly rendered.

I need to know when the image is totally rendered not only loaded.

Here is a fiddle showing the problem: https://jsfiddle.net/ghk07c1L/4/

//controller

angular.module("fb_totem")
.controller('mycontroller', function($scope){
 $scope.loading=true;

 $scope.ImgLoaded=function(val){
    $scope.loading=false;
  }
})

//markup

 <img image-on-load="ImgLoaded" ngf-thumbnail="url_mobilePhoto"/>
 <button type="button" ng-click="cancel()" ng-disabled="loading">Some Action</button>

//directive

angular.module("fb_totem")
.directive('imageOnLoad', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageOnLoad)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageOnLoad)(false);
                });
            }
        };
    })