title: Angular directive only works once
body: <p>I have a simple Angular directive but it only renders once.</p>
  
  <p>Successive calls to the template fail to render.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      A. &lt;ui-foo value="1" /&gt;
         B. &lt;ui-foo value="2" /&gt;
         C. &lt;ui-foo value="'fubar'" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>angular.module('ui.directives', []);
  angular.module('ui', [ 'ui.directives'
  ]).value('ui.config', {});
  
  angular
      .module('ui.directives', [])
      .directive('uiFoo', 
          function() {
            return {
              restrict: 'E',
                scope:{
                    value:'='
                },
                template: '&lt;h1&gt;This is my directive #{{value}}&lt;/h1&gt;'
            };
          }
    );
  angular.module('myApp', ['ui.directives']);
  </code></pre>
  
  <p>I would expect to see </p>
  
  <pre><code>A. This is my directive #1
  B. This is my directive #2
  C. This is my directive #fubar
  </code></pre>
  
  <p>but I only see the first line.</p>
  
  <p>See my <a href="http://jsfiddle.net/A8Vgk/354/" rel="nofollow">JsFiddle</a> for a quick repo</p>
  
  <p>What am I doing wrong?</p>