title: directive not interpolating, in a template string
body: <p>I'm trying to conditionally build a template. I got a k2plugin directive with some divs and spans. According to the pluginui attribute, I want to insert another directive at the end of the template. My code, that follows, interpolates everything but pluginui
  For example, the last div results in:</p>
  
  <pre><code>&lt;div {{pluginui}} width='300' height='420'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>{{pluginui}} is literal, while it should interpolate to trigger the other directive.
  Funny thing is, if I put {{pluginui}} elsewhere in the same line (for example between the  tags, it gets interpolated.</p>
  
  <p>What am I getting wrong?</p>
  
  <pre><code>app.directive("k2plugin", function () {
              return {
                  restrict: "A",
                  scope: true,
                  link: function (scope, elements, attrs) {
                      console.log ("creating plugin");
  
                      // this won't work immediatley. attribute pluginname will be undefined as soon as this is called.
                      scope.pluginname = "Loading...";
                      scope.pluginid = null;
  
                      // observe changes to interpolated attributes
  
                              // [...] observe name, id, width, height
  
                      attrs.$observe('pluginui', function(value) {
                          console.log('pluginui has changed value to ' + value);
                          scope.pluginui = attrs.pluginui + "viewport";
                      });
  
                  },
                  template: "&lt;div&gt;\
                             &lt;div&gt;\
                             &lt;span&gt;{{pluginname}}&lt;/span&gt;\
                             &lt;span ng-click=\"resize(pluginid)\"&gt;_&lt;/span&gt; &lt;span ng-click=\"remove(pluginid)\"&gt;X&lt;/span&gt;\
                             &lt;/div&gt;\
                             &lt;div {{pluginui}} width='{{pluginwidth}}' height='{{pluginheight}}'&gt;&lt;/div&gt;\
                             &lt;/div&gt;",
                  replace: true,
              };
          });
  
          app.directive("canvasviewport", function () {
              return {
                  restrict: "A",
                  scope: true,
                  link: function (scope, elements, attrs) {
                      console.log ("creating canvas viewport");
                  },
                  template: "&lt;canvas width='{{pluginwidth}}' height='{{pluginheight}}'&gt;&lt;/canvas&gt;",
                  replace: true
              };
          });
  
          app.directive("divviewport", function () {
              return {
                  restrict: "A",
                  scope: true,
                  link: function (scope, elements, attrs) {
                      console.log ("creating div viewport");
                  },
                  template: "&lt;div style=\"width='{{pluginwidth}}' height='{{pluginheight}}'\"&gt;&lt;/div&gt;",
                  replace: true
              };
          });
  
          app.directive("autoviewport", function () {
              return {
                  restrict: "A",
                  scope: true,
                  link: function (scope, elements, attrs) {
                      console.log ("creating auto viewport");
                  },
                  template: "&lt;canvas width='{{pluginwidth}}' height='{{pluginheight}}'&gt;&lt;/canvas&gt;",
                  replace: true
              };
          });
  </code></pre>