title: How to add ng-click of angular for the element created by Jquery?
body: <p>Someone created custom tag in the project, such as </p>
  
  <p><code>&lt;mytable config='{head:[title1, title2],data:[[col1, col2]]}'&gt;&lt;/mytable&gt;</code>
  ,</p>
  
  <p>the tag above will generate a table after the page is loaded.</p>
  
  <p>I want to create a button in the table, then I insert the string : </p>
  
  <p><code>'&lt;button class="btn btn-primary" ng-click="lookup(3)"&gt;lookup&lt;/button&gt;';</code></p>
  
  <p>but the ng-click doesn't work. I write a simple code to mock it:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="/javascripts/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/javascripts/angular/1.4.0/angular.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var create = function () {
                  $('#template').html('&lt;button ng-click="changeName()"&gt;click me&lt;/button&gt;')
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller="myCtrl"&gt;
          &lt;span&gt;{{name}}&lt;/span&gt;
          &lt;div id="template"&gt;&lt;/div&gt;
          &lt;button onclick="create()"&gt;create&lt;/button&gt;
  
          &lt;script&gt;
              var app = angular.module('myApp', []);
              app.controller('myCtrl', function($scope) {
                  $scope.name = "John";
                  $scope.changeName = function () {
                      $scope.name = "Jack";
                      alert("success");
                  }
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have googled and find the angular should compile the newly created element, but I don't know how to in this situation</p>