Why won't my directive interpolate its scope variable?

Question

I tried to write a directive to replace a CSS link with an embedded style definition.

Here is a working version.

Now, I would like to achieve that functionality with interpolation, so I do not have to set the innerHtml of the style element. Unfortunately, that seems to be impossible. I can attach the CSS to the scope, but Angular will not interpolate the code.

Here is the offending version:

.directive('link', function(CssSvc) {
  return {
    restrict: 'E',
    replace: true,
    scope: {},
    template: '<style type="text/css">{{css}}</style>',
    link: function(scope, elem, attr) {
      scope.$watch(function() { return CssSvc.css }, function() {
        scope.css = CssSvc.css;
      })
    }

  }
})

Can someone explain why this will not work, and if there is a way to make Angular perform the interpolation?

Answer 1

It seems to be an issue with the version of Angular I used.

This one, using version 1.3rc2, works just fine.

<script data-require="angular.js@1.3.0-rc2" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>\

Thanks to reddit user CureEgg , I now know that this was fixed as a bug in 1.3 .