title: AngularJS directive does not update on scope variable changes
body: <p>I've tried to write a small directive, to wrap its contents with another template file.</p>
  
  <p>This code:</p>
  
  <pre><code>&lt;layout name="Default"&gt;My cool content&lt;/layout&gt;
  </code></pre>
  
  <p>Should have this output:</p>
  
  <pre><code>&lt;div class="layoutDefault"&gt;My cool content&lt;/div&gt;
  </code></pre>
  
  <p>Because the layout "Default" has this code:</p>
  
  <pre><code>&lt;div class="layoutDefault"&gt;{{content}}&lt;/div&gt;
  </code></pre>
  
  <p>Here the code of the directive:</p>
  
  <pre><code>app.directive('layout', function($http, $compile){
  return {
      restrict: 'E',
      link: function(scope, element, attributes) {
          var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
          $http.get(scope.constants.pathLayouts + layoutName + '.html')
              .success(function(layout){
                  var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                  var result = regexp.exec(layout);
  
                  var templateWithLayout = result[1] + element.html() + result[2];
                  element.html($compile(templateWithLayout)(scope));
              });
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p><strong>My problem:</strong></p>
  
  <p>When I'm using scope variables in template (in layout template or inside of layout tag), eg. <code>{{whatever}}</code> it just work initially. If I update the <code>whatever</code> variable, the directive is not updated anymore. The whole link function will just get triggered once.</p>
  
  <p>I think, that AngularJS does not know, that this directive uses scope variables and therefore it will not be updated. But I have no clue how to fix this behavior.</p>