Convert compiled dom to html code in angularjs

I wrote a directive which has a postLink, and I compiled some html code and render it by angularjs. But the problem is I can't get the html code from the generated DOM.

My code is:

app.directive("showResultAsText", ['$compile', function ($compile) {
    return {
        restrict: 'A',
         compile: function compile(tElement, tAttrs, transclude) {
            console.log('compile');
            var watchModal = tAttrs["showResultAsText"];
            var elem = jQuery(tElement);
            var oriHtml = elem.html();
            elem.empty();
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.$watch(function () {
                        return scope.$eval(watchModal);
                    }, function (newVal) {
                        if (newVal) {
                            var s = $compile(angular.element(oriHtml))(scope);
                            console.log(s);
                            console.log(s[0]);
                            console.log(s[0].outerHTML);
                            console.log($('<div>').append(s[0]).html());
                            iElement.text(s[0].outerHTML);
                        }
                    });
                }
            }
        }
    }
}

You can see I used console.log to print the value of s. And in the console, it outputs:

You can see console.log(s) and console.log(s[0]) have many information, but when I use outerHTML, the inner buttons are all missing.

I also tried to use jquery: jQuery(s[0]).html(), but the same happened.

What is the correct way of convert that s to html code?