AngularJS : Why can't $interpolate render ng-style?

Question

I have created a drop down input directive, where the user can pass in a template string to set what the list will actually render. In my example I am passing in <div style="background-color: darkgrey" ng-style="{\'color\': isActive?\'red\':\'blue\'}">{{index}}</div> so it will render the items index number and then color it based on isActive. The index is show properly, and the background color is right but ng-style is being ignored. I create the template in a setTimeout because I have to wait for ng-repeat to render the <li>.

    setTimeout(function() {
         var spanList = elm.find('li');
         for (var index = 0; index < scope.list.length; index++) {
             var listElm = angular.element(spanList[index]);
             var listData = scope.list[index]
             listElm.html($interpolate(scope.listTemplate)(listData));
         }
     }, 0);

I am iterating through the <li> elements and setting the template for each one. I am using $interpolate instead of $compile because using $compile would result in [[Object HTMLDivElement]] and I couldn't figure out why. From what I can tell $compile uses $interpolate anyways, and it works except that ng-style, ng-show, and ng-hide don't work. Why would angular's directives not work with $interpolate?

Here is the working example plunker.

Answer 1

$interpolate returns a function which returns a string. It is used to resolve {{bindings}}.

$compile returns a function which returns an html-element. It is used to compile raw (html) strings into html-elements and resolve angular-code inside of this string. $compile uses $interpolate to resolve any bindings inside this string.

In your case you probably want to use $compile and .replaceWith().