How to move a directive in the DOM and keep the current scope

I try to move a directive into the DOM, every thing looks to work fine, except nothing happen after moving between the template and the view model.

Here is a sample of code of the code where I remove and recreate the directive at certain place in the DOM tree.

// Destroy the DOM container of the directive.
$(`my-directive[directiveId="'${scope.directiveId}'"]`).remove();

// Recreate the widget before the previous existing widget.
$(section[2]).before($compile(`<my-directive directiveId="'${scope.directiveId}'"></my-directive>`)(scope));

Visually, it works! The directive is created with the right id, I have also a $watch function that continue to work, but visually when a property change, it doesn’t change in the interface.

Do I have to destroy and create a new scope?

Source: New feed