title: AngularJS directive to update DOM
body: <p>I want to write a directive that change an image depending on the attribute value "name". The image is shown but it doesn't update when the "name" attribute changes.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img test name="{{finder.name}}"
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>.directive("test", function() {
      return {
          restrict: "A",
          scope: {
              name: '@'
          },
          link: function(scope, element, attrs) {
              scope.$watch("name", function(value) {
                  if (angular.isDefined(value))
                      var replaceName = value.replace(/[ \/]+/g, "_")
                          .toLowerCase();
                  var tag = '&lt;img src="/images/banner_' + 
                          replaceName + '.jpg" class="img-responsive"/&gt;'
                  element.replaceWith(tag);
              })
          }}}
      );
  </code></pre>
  
  <p>Thanks!</p>