title: angularjs - using {{}} binding inside ng-src but ng-src doesn't load
body: <p>I have been trying to bind a value to the ng-src of an img HTML element to no avail.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div ng-controller='footerCtrl'&gt;
  &lt;a href="#"&gt;&lt;img ng-src="{{avatar_url}}"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS code:</p>
  
  <pre><code>app.controller('footerCtrl',function($scope, userServices)
  {
  $scope.avatar_url='';
  $scope.$on('updateAvatar', function()
  {$scope.avatar_url = userServices.getAvatar_url();}
  );
  }
  
  app.factory('userServices', function($rootScope){ 
  var avatar_url='';
  return{  setAvatar_url: function(newAvatar_url)
  { avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}}
  );
  </code></pre>
  
  <p>I would like to update the avatar_url variable in the <code>ng-src</code> every-time its respective variable(avatar_url) in the user Service is updated. The variable in the user Service is updated through a http.POST request to the server. I have checked that the response from the server does update the variable in the user Service which is then broadcast to the avatar_url variable in the <code>footerCtrl</code>.</p>
  
  <p>However, the image element HTML does not reflect the changes at all. In fact, I have also tried to preset the avatar_url variable to a relative path to one of the pictures in my page, the image still shows nothing(the ng-<code>src</code> value is empty).  T</p>