AngularJS: How to create a directive that adds/removes itself from DOM when needed?

If i have a custom modal directive that looks something like this:

return {
  restirct: 'E',
  templateUrl: 'modal.html',
  scope: {
    modalContent: "=",
    modalOpen: "="
  }
}

and the html:

<ng-modal modal-content="content" modal-open"active"></ng-modal>

how can i make sure that the modal doesn't exist in the DOM when it's closed and once open it inserts itself into the DOM? I have to insert the directive into the html or else the directive won't work but that means that when i run the application the modal already exists in the html even if it wasn't opened.

I created a plunker of what i have so far here but it only hides/shows the modal using css classes instead of removing it completely

EDIT:

I created another version here which actually adds/removes the directive from the DOM. It's based on this article but it requires splitting the logic for adding/removing the directive between the directive and an external controller (The external controller handles adding the element and the directive handles the removing). I want the directive to handle everything, is this possible?