how to add transclude in angularjs

Question

I am trying to add transclude property in angularjs .I am got getting error but still not able to implement the transclude property .I am not able to see both content outer and inner contend. I am not able to display both text "hello" and "this" simultaneously

here is my code

http://plnkr.co/edit/qr45XmP046OCzZPyCeyO?p=preview

 var app =angular.module('Testappp',[]);
    app.directive('superMan',function(){

        return {

            restrict:"E",

          //  templateUrl:'template/home.html',
            transclude :true,
            template:"<div ng-transclude>this</div>",





        }

    })

Answer 1

You can do it like so,

var app =angular.module('Testappp',[]);

app.directive('superMan', function () {

    return {
        restrict: "E",

        transclude: true,
        template: 
          "<div>" + 
            "<div>this</div>" + 
            "<div ng-transclude></div>" +
          "</div>",
    }

})

Example

Your example does not work because as said in documentation about ngTransclude

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.