angularjs - directive not interpolating, in a template string

Question

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:

<div {{pluginui}} width='300' height='420'></div>

{{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.

What am I getting wrong?

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: "<div>
                           <div>
                           <span>{{pluginname}}</span>
                           <span ng-click="resize(pluginid)">_</span> <span ng-click="remove(pluginid)">X</span>
                           </div>
                           <div {{pluginui}} width='{{pluginwidth}}' height='{{pluginheight}}'></div>
                           </div>",
                replace: true,
            };
        });

        app.directive("canvasviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating canvas viewport");
                },
                template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",
                replace: true
            };
        });

        app.directive("divviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating div viewport");
                },
                template: "<div style="width='{{pluginwidth}}' height='{{pluginheight}}'"></div>",
                replace: true
            };
        });

        app.directive("autoviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating auto viewport");
                },
                template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",
                replace: true
            };
        });

Answer 1

I don't think Angular will interpolate something into a directive name. {{}}s (automatically) set up a $watch. When the $watch notices a change, it will update the view, but it won't call $compile, which is what I think needs to happen here.

So, I would try generating the HTML/template in the directive's link function and then $compile it. Something like:

scope.$watch('pluginui', function(newValue) {
   var jqLiteWrappedElement = angular.element('<div ' + newValue + ' width=...');
   element.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
})

Remember to inject $compile into the directive.