Compiling interpolation manually

Question

I have a custom directive and rendering that directive using ng-repeat. what I need is I want to compile interpolation before passing into my custom directive.

Find plnkr below

https://plnkr.co/edit/bjdBSKCFPhgbE2aREupy?p=preview

Here I want to compile interpolation in this code <display-id mycompile id={{op.id}}> </display-id> using mycompile directive.

    app.directive('mycompile', function ($compile, $interpolate) {
        return {

            restrict: 'EA',
            replace: true,
            compile: function ($scope, $elm, $attrs) {
                return {
                    pre: function ($scope, $elm, $attrs) {

                            $interpolate($elm[0])($scope);

                    }
                }
            }

        }
    })

Answer 1

$interpolateProvider expects string to be an argument, so what you need is to convert your element to string and then back to DOM element if you want, it could be achieved with outerHTML property like so:

$interpolate($elm.prop('outerHTML'))($scope);