Angular: Image Onload Catching

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<h4>Horizontal image has shadow from above , vertical - from below</h4>

<a href="http://en.wikipedia.org/wiki/Andi_Gutmans" target="_blank">
<img ng-src="http://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png" class="horizontal" orientable />

<a href="http://kids.gov.il/health/lazies/en/" target="_blank">
<img ng-src="http://www.galim.org.il/pools/files/GalimGifs/GalimGifPicture/12888.jpg" class="horizontal" orientable />
</a>

CSS

img{margin: 50px;  border-radius: 20px; border: 1px solid #ddd; vertical-align: middle;}

.vertical{   
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);    
}

.horizontal{
    box-shadow: 0 -5px 5px rgba(0,0,0,0.3);    
}

JavaScript

var app = angular.module('myApp',[]);

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});