AngularJS - parse scope data as Angular expression

Question

I need to create a directive which allows data passed in to contain angular expressions, such as the contrived example below (Codepen):

<div ng-controller="ctrl">
    <list-test data="data"></list-test>
</div>

Where data is defined as:

app.controller('ctrl', ['$scope', function($scope) {
    $scope.data = [
        '<input type="text" ng-model="testModel">',
        '{{testModel}}'
    ];
}]);

And my directive looks like:

app.directive('listTest', ['$sce', function($sce) {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        template: [
            '<ul ng-repeat="item in data">',
                '<li ng-bind-html="escape(item)"></li>',
            '</ul>'
        ].join(''),
        link: function(scope) {
            scope.escape = function(item) {
                return $sce.trustAsHtml(item);
            };
        }
    };
}]);

I've tried modifying my linker to run the item through the compiler but this causes errors. I do know about ng-transclude but it doesn't fit my particular use case.

Answer 1

Do something like:

scope.$watch("htmlList", function(value) {
    if (value) {
        childScope = scope.$new();
        childElement = $compile(htmlString(value))(childScope);
        elem.append(childElement);
    }            
});

Of course it gets more complicated if it is more than a one-time binding. In which case the code needs for remove the previous child element and destroy the previous child scope.

The DEMO on JSFiddle.