Compile directive template before it is added to scope in AngularJS

I have an AngularJS directive like so:

MyDirective = (myService) ->

  templateUrl: 'my-partial.html'

  compile: () ->
    pre: ($scope, $element, $attrs, $controller) ->
      $attrs.$observe 'myDirective', (name) ->
        success = (response) ->
          $scope.entries = response

        failure = () ->
          console.log "Failed to load data for #{name}"

        myService.loadData(name)
        .then success, failure

MyDirective.$inject = ['MyService']

And a partial:

<ul>
  <li data-ng-repeat="entry in entries">
    <img src="{{entry.url}}">
  </li>
</ul>

How can I compile the template, thus replacing ...src="{{entry.url}}"... with the correct src for the image, before it is added to the DOM?

The issue is that we get a number of 404 errors before the async call has received data and we want to avoid those.