title: AngularJS How to add / remove directive dynamically in page when button click
body: <p>suppose i have two button and when we click on button 1 then show function call in controller and same way when we click on button 2 then hide function call in controller.</p>
  
  <p>from show function how could i dynamically load and add directive in page and as well as how could i hide or remove directive from page when hide function will be called.</p>
  
  <p>hence i am new in angular so not sure the below code will add directive at run time if i call it from show function ?</p>
  
  <pre><code>$('body').append($compile("&lt;my-angular-directive /&gt;")(scope));
  scope.$apply(); 
  </code></pre>
  
  <p>i do not know how to remove directive from page if it exist in page from controller function. give me suggestion how to achieve this. thanks</p>