I'm using the following code in my Angular app to display an image:

<img ng-src="{{planet.image_url}}" class="planet-img"/>

And I'm using $watch to change the image_url attribute when other events happen. For example:

$scope.$watch('planet', function(planet){
  if (planet.name == 'pluto') {
     planet.image_url = 'images/pluto.png';
  }
});

Using console logs, I see that the model attributes are changing just like I want them to, but these changes are not reflected in the DOM. Why isn't ng-src updating automatically as the model changes? I'm new to Angular, so maybe this is a concept I haven't yet grasped. Any help will be greatly appreciated.

I'm using the following code in my Angular app to display an image:

<img ng-src="{{planet.image_url}}" class="planet-img"/>

And I'm using $watch to change the image_url attribute when other events happen. For example:

$scope.$watch('planet', function(planet){
  if (planet.name == 'pluto') {
     planet.image_url = 'images/pluto.png';
  }
});

Using console logs, I see that the model attributes are changing just like I want them to, but these changes are not reflected in the DOM. Why isn't ng-src updating automatically as the model changes? I'm new to Angular, so maybe this is a concept I haven't yet grasped. Any help will be greatly appreciated.

• javascript
• dom
• angularjs

• What was the default planet.image_url? If it is the same as the "images/pluto.png", you may need to use a cache buster. – geniuscarrier Commented Oct 1, 2013 at 22:44

2 Answers 2

You are using $scope.$watch in a wrong way. Please see the documentation:

function(newValue, oldValue, scope): 
called with current and previous values as parameters.

So the function is passed the old and the new value and the scope. So if you want to make updates to your data, you will need to reference the scope. As this will equal to $scope here anyway, you can just use $scope directly and don't care for any parameter. Do this:

$scope.$watch('planet', function(){
  if ($scope.planet.name == 'pluto') {
    $scope.planet.image_url = 'images/pluto.png';
  }
});

Or if you want to use the scope passed to the function (as said, it will not make a difference at least here):

$scope.$watch('planet', function(newval, oldval, scope){
  if (newval.name == 'pluto') {
    scope.planet.image_url = 'images/pluto.png';
  }
});

The best I can tell by this working CodePen example that I created everything should work just fine. Take a look at what I did and let me know if I am missing something.

I hope this helps.

The template:

<section class="well" ng-app="app" ng-controller="MainCtrl">
  Select Planet:<br>
  <label>Earth <input type="radio" ng-model="planetId" value="1" /></label>
  <label>Mars <input type="radio" ng-model="planetId" value="2" /></label>

  <img ng-src="{{currentPlanet.url}}" />
  <span class="label">{{currentPlanet.label}}</span>
</section>

The code:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.currentPlanet = {};

  $scope.planets = [{
    id: 1,
    label: 'Earth',
    url: 'http://s10.postimg/uyggrc14l/earth.png'
  },{
    id: 2,
    label: 'Mars',
    url: 'http://s21.postimg/maarztjoz/mars.png'
  }];

  $scope.$watch('planetId', function(id) {
    for(var i = 0; i < $scope.planets.length; i++) {
      var planet = $scope.planets[i];
      if(planet.id == id) {
        $scope.currentPlanet = planet;
        break;
      }
    }
  });
});