title: Understanding AngularJS ng-src
body: <p>As explained <a href="http://docs.angularjs.org/api/ng.directive:ngSrc" rel="nofollow noreferrer">here</a>, the AngularJS directive ng-src is used to prevent the browser from loading the resource (e.g. image) before the handlebars get parsed. I'm currently using the following code:</p>
  <pre><code>&lt;div ng-controller=&quot;MyCtrl&quot;&gt;
    &lt;img ng-src=&quot;http://localhost:8081/media/{{ path }}&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>With the following JavaScript:</p>
  <pre><code>function MyCtrl($scope, $timeout) {
      $timeout(function () {
          $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
      }, 1000);
  };
  </code></pre>
  <p>The path is being retrieved from a webservice. Because of this delay, the browser tries to load <code>http://localhost:8081/media/</code>, which causes a 404. Once the path is retrieved, the browser issues the correct request and loads the image.</p>
  <p>What is the preferred method to prevent loading any resources until all data is ready?</p>
  <p>Please see <a href="http://jsfiddle.net/xzwBt/1/" rel="nofollow noreferrer">jsfiddle</a> for an example illustrating my situation.</p>