Custom directive doesn't get updated inside cellTemplate of ui-grid

Question

I am using a custom directive named flag inside the cellTemplate of ui-grid. This directive just accepts a country name (USA or CANADA), and displays its corresponding flag. The directive works fine when the page loads for the first time. However, later even if I change the value of flag to anything, the custom directive doesn't update and display the new flag. Not sure what am I missing.

Plnkr

Answer 1

The directive gets compiled once! You need to watch the attribute or set a two way binding!

app.directive('flag', function() {
  var flags = {
    USA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/us.png',
    CANADA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/ca.png'
  };

  return {
      restrict: "A",
      scope: {
          flag: "@"
      },
      link: function(scope, elem, attrs) {
          scope.$watch('flag', function(newValue, oldValue){
              angular.element(elem).attr('src', flags[newValue]);
          });
      }
  };
});

working plunkr ==> http://plnkr.co/edit/dcHDMEY8MpQnCnm99aDd?p=preview