How to render {{ }} during ng-repeat?

Question

consider following directive:

.directive('otherDirective', function(){
  return {
    link: function(scope, elem, attr){
      console.log(elem[0]);
      alert(elem[0]);
    }

  }

if I apply it into a ng-repeat tag, I can notice the {{item}} is not evaluated until the ng-repeat ends (when blocked by alert()). how can I have it rendered after each "loop"?

Because in real scenario, those items contain an image, and I would like to do callbacks after each image is loaded, but without the img url I can't bind the event.

here is the plunker

Answer 1

Use $timeout to wait for ng-repeat to finish: Plunker

.directive('otherDirective',['$timeout', function($timeout){
  return {
    link: function(scope, elem, attr){
      $timeout(function () {
        console.log(elem[0]);
        alert(elem[0]);
      });
    }
  };
}]);