title: AngularJS directive fails to render replaced DOM
body: <p>I'm trying to make a simple directive that replaces a span with another span binding to 2 attributes of the scope:</p>
  
  <pre><code>.directive('exCategory', function () {
      return {
          restrict: 'A',
          scope: {
              category: '=exCategory'
          },
          replace: true,
          template: '&lt;span class="category-label" ng-bind="category.name" style="background-color: {{category.color}};"&gt;&lt;/span&gt;',
          link: function (scope, element) {
              console.log(scope, element);
  
          }
      };
  })
  </code></pre>
  
  <p>This is my html:</p>
  
  <p><code>&lt;span ex-category="transaction.category"&gt;&lt;/span&gt;</code></p>
  
  <p>When rendered, it does nit give the color, and raises the following error on the console:</p>
  
  <pre><code>TypeError: Cannot read property 'length' of undefined
      at $interpolate (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:5318:24)
      at attrInterpolateLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4987:27)
      at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4774:13)
      at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4365:15)
      at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4368:13)
      at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4368:13)
      at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4270:30)
      at ngRepeatAction (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:14945:15)
      at Object.$watchCollectionAction [as fn] (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:8476:11)
      at Object.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:8570:27) &lt;span class="category-label" style="background-color: {{category.color}};;background-color: {{category.color}};" ex-category="transaction.category"&gt;
  </code></pre>
  
  <p>Something seems wrong with the generated DOM: </p>
  
  <p><code>&lt;span class="category-label" style="background-color: {{category.color}};;background-color: {{category.color}};" ex-category="transaction.category"&gt;</code></p>
  
  <p>If I remove the <code>color</code> bit, it works.</p>
  
  <p>Any suggestions?</p>
  
  <p>Edit: If I use the hit I want to render directly on my template, it works.</p>
  
  <p>Edit: the problem seems to be related with the <code>style</code> tag:</p>
  
  <p><code>template: '&lt;span class="category-label" ng-bind="category.name" style="aaa"&gt;{{category.color}}&lt;/span&gt;'</code></p>
  
  <p>renders:</p>
  
  <p><code>&lt;span class="category-label ng-binding" ng-bind="category.name" style="aaa;aaa" ex-category="transaction.category"&gt;asdads&lt;/span&gt;</code></p>
  
  <p>The problem does not happen with version 1.0.1. 
  JSFiddle with the problem occurring on 1.1.5:</p>
  
  <p><a href="http://jsfiddle.net/marcio0/a5KLT/" rel="nofollow">http://jsfiddle.net/marcio0/a5KLT/</a></p>