title: Angular error in IE: Unable to set nodeValue of undefined or null reference
body: <p><strong>TL;DR</strong></p>
  
  <p>See <a href="http://codepen.io/djskinner/pen/GJKoyO" rel="nofollow">this Code Pen</a> that demonstrates the error in IE. Replacing <code>&lt;div&gt;{{item.name}}&lt;/div&gt;</code> with <code>&lt;div&gt;&amp;nbsp;{{item.name}}&lt;/div&gt;</code> fixes the issue. Why? </p>
  
  <p><strong>Full Question</strong></p>
  
  <p>I have a <code>parent</code> directive that uses <code>transclude: true</code>. Within the <code>parent</code> template there is a <code>repeater</code> directive that transcludes the contents by dynamically creating an <code>ng-repeat</code> and compiling it such that the transcluded contents is repeated.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div ng-app="ieTest"&gt;
      &lt;parent&gt;
          &lt;div&gt;{{item.name}}&lt;/div&gt;
      &lt;/parent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>parent</code> directive:</p>
  
  <pre><code>.directive('parent', function($timeout) {
    return {
      restrict: 'E',
      controller: function() {
        var ctrl = this;
  
        $timeout(function($timeout) {
          ctrl.items = [{ 
            name: 'One'
          }, {
            name: 'Two'
          }, {
            name: 'Three'
          }];        
        }, 1000);
  
        $timeout(function($timeout) {
          ctrl.items = [{ 
            name: 'Five'
          }, {
            name: 'Two'
          }, {
            name: 'Three'
          }, {
            name: 'Four'
          }];        
        }, 2000);    
      },
      controllerAs: 'ctrl',
      transclude: true,
      template: '&lt;section&gt;&lt;div repeater&gt;&lt;/div&gt;&lt;/section&gt;',
      link: function() {
        // This is where fancy stuff happens that is not relevant to the issue
      }
    }
  })
  </code></pre>
  
  <p>The <code>repeater</code> directive:</p>
  
  <pre><code>.directive('repeater', function($compile) {
    return {
      restrict: 'A',
      require: '^parent',
      link: function(scope, element, attrs, parentCtrl, transclude) {
        transclude(function(clone) {
          element.append(clone);
        });
  
        // Simplified for the test case but this ng-repeat expression is dynamically generated in reality
        element.attr('ng-repeat', 'item in ctrl.items');
        element.removeAttr('repeater');
  
        $compile(element)(scope);
      }
    }
  })
  </code></pre>
  
  <p><strong>The problem:</strong></p>
  
  <p>In Internet Explorer if the transcluded contents is like <code>&lt;div&gt;{{item.name}}&lt;/div&gt;</code> then there will be an error and the transcluded contents will not be repeated / displayed. To avoid this error I have discovered that adding some simple content that is always present inside the element such as <code>&lt;div&gt;&amp;nbsp;{{item.name}}&lt;/div&gt;</code> will prevent the error from occuring. Why is this and how do I avoid it?</p>
  
  <p>I've created a reduced test case of the issue <a href="http://codepen.io/djskinner/pen/GJKoyO" rel="nofollow">here</a>. If you run it in IE10 you should notice that nothing happens after 1s and 2s and there will be <code>TypeError: Unable to set property 'nodeValue' of undefined or null reference</code>
   errors in the console. However if you replace <code>&lt;div&gt;{{item.name}}&lt;/div&gt;</code> with <code>&lt;div&gt;&amp;nbsp;{{item.name}}&lt;/div&gt;</code> or anything such as <code>&lt;div&gt;X{{item.name}}&lt;/div&gt;</code> then it seems to work without issue.</p>
  
  <p>I'm wondering if the issue is with me having to remove the <code>repeater</code> attribute and recompile the <code>repeater</code> directive to create the <code>ng-repeat</code>. Perhaps there is a better way to achieve this?</p>
  
  <p>I'm seeing this problem on IE10 and IE11.</p>