title: AngularJs directive to append and remove DOM element with function
body: <p>I'm trying to create a <code>directive</code> to append a new <code>html element</code> to the <code>DOM</code> and also to remove it.</p>
  
  <p>The logic to append and remove is already working, except to remove the <code>element</code> when clicking on a button. Right now I'm only able to remove it when pressing the <code>esc</code> key. I have this directive here:</p>
  
  <pre><code>function scLight() {
      return {
          restrict: 'A',
          link: function(scope, element) {
              var myEl = '&lt;div sc-light id="lightBox" class="debugModal"&gt;&lt;h1&gt;Tests&lt;/h1&gt;&lt;button ng-click="removeEl()"&gt;Close&lt;/button&gt;&lt;/div&gt;',
                  ngEl = angular.element(myEl);
  
              scope.insertEl = function() {
                  // angular.element(document.body).append(ngEl); //Append to body
                  element.append(ngEl); //Append to element
              }
  
              scope.removeEl = function() {
                  var lightBoxEl = document.getElementById("lightBox"),
                      ngLightBoxEl = angular.element(lightBoxEl);
                  ngLightBoxEl.remove();
              }
  
              document.addEventListener("keyup", function(event) {
                  if(event.which == 27) {
                      return scope.removeEl();
                  }
              });
          }
      }
  }
  </code></pre>
  
  <p>If I click the button to insert the new <code>element</code>, it works. If I press <code>esc</code> the <code>element</code> is removed. But if I press the button to Close the element, which has this <code>"ng-click="removeEl()"</code>, nothing happens.</p>
  
  <p>How can I solve this problem?</p>