Ng-src does not load inside collection repeated list

If i do this :- Ng-Src image loads correctly

<a class="item item-thumbnail-left" ng-repeat="i in data"> <img ng-src="{{i.image}}" loading-src=""> <h4>Ng-repeat List</h4> </a>

if i use collection-repeat :- Ng-Src won’t load

<a class="item item-thumbnail-left" collection-repeat="i in data" collection-item-width="'100%'" collection-item-height="120"> <img ng-src="{{i.image}}" loading-src=""> <h4>Collection-repeat List</h4> </a>

Here is the codepen :-

PS - loading-src loads if ng-src image is not loaded ! in codepen above collection repeat loads image from loading-src and not ng-src.

Thanks ! Help is appreciated !

Update :-

its the issue with loading-src which directive of another angular plugin . but ng-repeat works even with loading-src.

how to make it work with collection-repeat?