AngularJS - ng-src change events -

i have following template:

<img ng-src="{% ng displayimage %}" alt="" /> <ul class="thumbnails" data-obj-id="{{ obj.id }}">     <li class="span2" ng-repeat="image in images">         <a class="thumbnail" href="#" ng-click="selectimage($index)">             <img ng-src="{% ng image.thumbnail %}" alt="" />         </a>     </li> </ul> 

{%ng } transaltes {{ }}.

and directive:

angular.module('profiledirectives', []).     directive('thumbnails', function() {         return {             restrict: 'c',             transclude: false,             controller: function ($scope, $element, $attrs, image, $window) {                 $scope.images = image.query({                     obj_id: $attrs.objid                 }, function() {                     $scope.selectimage(0);                 });                  $scope.selectimage = function(index) {                     $scope.displayimage = $scope.images[index].image;                 }             }         }     }); 

what doing loading list of images $scope.images , changing ng-src when click on thumbnail. working correctly, images take time load , hence loading indicator seems necessary. seems logical listen image http request happens because of ng-src change in value, , show loading indicator while request loading, i'm not sure if there way listen or capture request.

any ideas?

you should use httpinterceptor explained on page: http://docs.angularjs.org/api/ng.$http

// register interceptor service $provide.factory('myhttpinterceptor', function($q) {   return function(promise) {     // signal service display loading indicator      return promise.then(function(response) {       // signal service remove loading indicator     });   } });  $httpprovider.responseinterceptors.push('myhttpinterceptor'); 

another solution might display loading indicator behind image? think image turns transparent when it's not loaded yet.