angularjs - using {{}} binding inside ng-src but ng-src doesn't load -


i have been trying bind value ng-src of img html element no avail.

html code:

<div ng-controller='footerctrl'> <a href="#"><img ng-src="{{avatar_url}}"/></a> </div> 

angularjs 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');}} ); 

i update avatar_url variable in ng-src every-time respective variable(avatar_url) in user service updated. variable in user service updated through http.post request server. have checked response server update variable in user service broadcast avatar_url variable in footerctrl.

however, image element html not reflect changes @ all. in fact, have tried preset avatar_url variable relative path 1 of pictures in page, image still shows nothing(the ng-src value empty). t

changing ng-src value simple. this:

<html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> </head> <body> <img ng-src="{{img_url}}"> <button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">click</button> </body> </html> 

here jsfiddle of working example: http://jsfiddle.net/hx7b9/2/


Comments