Lazy load images using AngularJS

I am using this plugin "https://github.com/Treri/me-lazyload" to lazy load images in my AngularJS application.

It works only for few images then it is not working.

This is my HTML :-

<div class="property-tab-content internal-resource">
<div property-details-header="tabData.label"></div>
    <div ng-if="!!media">
        <div class="photos-list">
            <div class="bold" ng-if="!!media.hotel">{{ '_PROPERTY_HOTEL_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="hotel in media.hotel"> 
                <div >
                    <img lazy-src="{{hotel.tnUrl}}"  alt="property-image" animate-visible="true" animate-speed="0.5s"ng-if="hotel.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.rooms">{{ '_PROPERTY_ROOMS_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="room in media.rooms"> 
                <div>
                    <img lazy-src="{{room.tnUrl}}" alt="property-image"   animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.features">{{ '_PROPERTY_FEATURES_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="features in media.features"> 
                <div>
                    <img lazy-src="{{features.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="features.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.localarea">{{ '_PROPERTY_LOCAL_AREA_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="localarea in media.localarea"> 
                <div>
                    <img lazy-src="{{localarea.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="localarea.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.meetingspace">{{ '_PROPERTY_MEETINGS_AND_EVENTS_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="meetingspace in media.meetingspace"> 
                <div>
                    <img lazy-src="{{meetingspace.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="meetingspace.tnUrl">
                </div>
            </div>
        </div>

Working Img tags are like this :-

<img lazy-src="http://starwoodhotels.com/pub/media/430/she430gr.38695_ss.jpg" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl" class="ng-scope ng-isolate-scope" src="http://starwoodhotels.com/pub/media/430/she430gr.38695_ss.jpg" style="background-color: rgb(255, 255, 255); opacity: 1; transition: opacity 0.5s;">

For these tags the image is not visible :-

<img lazy-src="http://starwoodhotels.com/pub/media/430/na430gr5_ss.jpg" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl" class="ng-scope ng-isolate-scope" style="background-color: rgb(255, 255, 255); opacity: 0; transition: opacity 0.5s;">
    </div>  </div>
</div>

For some images the Directive works fine and for some its is not. These Images are generated by same ng-repeat.