title: How to override image source within a directive
body: <p>I want to override an image src within a directive. I've tried the following, none of which work.</p>
  
  <pre><code>app.directive('imgTransform', function () {
      return {
          retrict: 'A',
          link: function (scope, elem, attrs) {
              elem.attr('ng-src', 'foo');
              attrs.ngSrc = 'foo';
              elem.attr('src', 'foo');
              attrs.src = 'foo';
  
          }
      };
  });
  </code></pre>
  
  <p>Does the link function execute before the DOM binding takes place?</p>
  
  <p>I also tried creating an isolate scope and binding to the <code>ngSrc</code> attribute:</p>
  
  <pre><code>    scope: {
          src: '@ngSrc'  
      },
  </code></pre>
  
  <p>Then setting <code>scope.ngSrc</code> in the link function. This did not work either.</p>
  
  <p>Am I missing something?</p>
  
  <p><a href="http://jsfiddle.net/benfosterdev/y7JE9/" rel="nofollow">http://jsfiddle.net/benfosterdev/y7JE9/</a></p>