javascript - AngularJS | Passing directive's name as an attribute to another directive -

in markup have container, , 2 buttons inside of it. each button opens same popup window different content. container , buttons made directives , popup - service. html:

<div my-container>     <my-button ng-click="openpopup()" popupcontent="<popup-content1></popup-content1>"></my-button>     <my-button ng-click="openpopup()" popupcontent="<popup-content2></popup-content1>"></my-button>     <my-popup></my-popup> </div> 

as can see try add content popup window attribute , value of attribute name of directive has inserted in dom. first, attributes in my-button directive:

//... link: function(scope, elm, attrs) {     scope.openpopup()(true, attrs.popupcontent); } //... 

then pass value of attribute my-container directive's controller scope:

//... $scope.openpopup = function(msg, content) {     //...     $scope.popupcontent = content; }; 

and after try attribute's value in popup's template:

<header> .... </header>  <ng-transclude>{{ popupcontent }}</ng-transclude> <footer> ... </footer> 

so, problem got strings

<popup-content1></popup-content1> 

in popup instead of real content "lorem ipsum...." (which in popup-content1 , popup-content2 directives templates).

how can 'real' content popup?
many in advance!