title: Angular JS - Load a template html from directive on click of a button
body: <p>I am trying to load a HTML template when a link is clicked. I have made a directive that contains <code>templateUrl</code> which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in index.html. whatever i have done so far is shown below, but it doesn't work.</p>
  
  <p>index.html </p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Example - example-example12-production&lt;/title&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="docsTemplateUrlDirective"&gt;
    &lt;div ng-controller="Controller"&gt;
    &lt;a href="#" ng-click="showdiv()"&gt;show&lt;/a&gt;
    &lt;div id="d"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js </p>
  
  <pre><code>(function(angular) {
    'use strict';
  angular.module('docsTemplateUrlDirective', [])
    .controller('Controller', ['$scope', function($scope) {
  
      $scope.showdiv = function(){
        $("#d").append("&lt;div my-Customer&gt;&lt;/div&gt;");
      };
    }])
    .directive('myCustomer', function() {
      return {
        templateUrl: 'my-customer.html'
      };
    });
  })(window.angular);
  </code></pre>
  
  <p>my-customer.html</p>
  
  <pre><code>&lt;p&gt;DIV CONTENT&lt;/p&gt;
  </code></pre>
  
  <p>Here is the link i was testing this code <a href="http://plnkr.co/edit/BotAQh13RVKBsOqHF1q1?p=preview" rel="noreferrer">here</a></p>