How do I change the output of Angular ng-src from the 'src' attribute to 'data-src'?

Question

I'm using the jquery plugin, OwlCarousel, with an ng-repeat scenario in one of my views like so:

<div owl-carousel-item="" ng-repeat="item in items" class="item">
        <img id="image{{ $index }}" data-ng-src="http://uploads.mysite.com/{{ article.photoURL }}" class="lazyOwl" />
</div>

It works well and outputs the following markup for each item in the carousel:

<img id="image0" data-ng-src="http://uploads.mysite.co/rs/e1f7daf77d42537212d31d8dbd113ec8.jpg" class="lazyOwl" src="http://uploads.mysite.co/rs/e1f7daf77d42537212d31d8dbd113ec8.jpg">

Is there a way to make the output render ' data-src=... ' instead of just ' src=... '?

Answer 1

Use ng-attr instead. ng-src is just a special case.