title: How to call a function in "ng-src"
body: <p>I need to be able to call a function in order to run code to dynamically retrieve the source of an image. The following code snippet shows an example of what I want:</p>
  
  <pre><code>&lt;!-- "myFunction" exists in the current scope --&gt;
  &lt;img ng-src="myFunction()" /&gt;
  </code></pre>
  
  <p>I'm sure this has to be simple but I just can't find anything in the <a href="http://docs.angularjs.org/api/ng/directive/ngSrc">ng-src documentation</a>! Anyone else ever hit this?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>The Directive (Example based on answers)</strong></p>
  
  <p>Others recommended a directive. I can't post client code so I wrote a short example of what that would could look like in plunker (<a href="http://plnkr.co/edit/hTSa13jYde2bfUOEHWC6?p=preview">see here</a>). The core directive itself is:</p>
  
  <pre><code>app.directive("imageSource", function (){
    return { link: function (scope, element, attrs){
        element.attr("src", scope.imageUrlArray[attrs.imageSource]);
      }
    };
  });
  </code></pre>
  
  <p>I know that what I have here as an example could probably just be done with the ng-repeat using the variable in an ng-src but it serves as an example of what a directive <em>would</em> look like if one were necessary.</p>