Dynamically adding an attribute Directive to a transclude Directive in AngularJS

I'm attempting to dynamically add an attribute Directive to a transclude directive.

For example, the template would start off as follows:

<div class="container">
  <div ng-transclude></div>
</div>

After an event takes place (eg. a click), it would then have an attribute Directive added, such as:

<div class="container" some-directive>
  <div ng-transclude></div>
</div>

I'm using the following JavaScript to do this:

div = angular.element("#demoParentDirective .container").clone();
div.attr('some-directive','');
div = $compile(div)($scope);
angular.element("#demoParentDirective .container").replaceWith(div);

However, this results in:

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="">

I've created a stripped down demo of what I'm trying to do in Plunker to show how I'm doing it:

http://ift.tt/1I5SSZi

Any help would be appreciated. Thanks.