Angular: Run JS code when include finished loading image

Question

What I want is to show loading animation while image is loading.

Basically I have large system and all code bits are injected using ngInclude. So if I have to construct the bit I'm interested in it would look like:

<div ng-controller="MyTabCtrl">
    <div id="preview-panel" waiting-animation="img/loading.gif" waiting-property="isLoadingPreview">
        <ng-include src="htmlInclude" />
    </div>
</div>

And htmlInclude html for example would just be a div with img. The htmlInclude changes when I click different posts I have. So far I loaded low quality images so loading wasn't an issue - it was quick. Now I want to load high-quality images and their loading takes a while.

So all my included html (text, buttons etc) is loaded, and the image gets replaced after a few moments.

I tried to fiddle with different events I found in other questions, but they don't seem to be working for me. Either the loading doesn't appear at all, or it appears and stays there even after loading is complete.

Some stuff I tried is:

$scope.$on('$includeContentLoaded', function () {
    $scope.isLoadingPreview = false ;
});

or

$scope.$on('$viewContentLoaded', function() {
    $scope.isLoadingPreview = false ;
});

How can I make this happen?

Thanks!