directive inside directive

HTML

<div ng-controller="Ctrl">
    <my-directive></my-directive>   
<div>

JavaScript

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

function Ctrl($scope) {      
   
}

app.directive('myDirective', function($compile){
  return {    
    replace: true,    
    transclude: false,
    restrict: 'E',
    scope: false,    
    link: function postLink(scope, iElement, iAttrs) {
            iElement.html('<my-button>MyButtonLabel</my-button>');           
            $compile(iElement.contents())(scope);         
    }
  };  
});

app.directive('myButton', function() {
  return {    
    restrict: 'E',
    template:'<button class="btn btn-primary">MyButtonLabel</button>',
    replace: true
  };  
});