title: Button from a dynamically added html tag does not invoke ng-click in angular
body: <p>I am trying to make my button from an appended html work using the ng-click event. I have seen some solutions here but it seems not to work for me. Probably because I have a different situation or I just couldn't use it right. My codes are below:</p>
  
  <p><strong>fileMaintenanceCtrl.js</strong></p>
  
  <pre><code>/// &lt;reference path="../angular.js" /&gt;
  
  angular.module('adminApp')
  .controller('fileMaintenance', [
      '$scope', '$http', '$sce', function ($scope, $http, $sce, $compile) {
  
          // Adding Client
  
          $scope.addNewClient = function () {
              debugger;
              alert($scope.addClient.CompanyName);
          }
  
          // End of adding client
  
  
  // This is how I get the html template            
  $scope.addClient = function () {
                  $http.get('/FileMaintenance/AddClient')
                      .then(function(response) {
                              var divTemplate = response.data;
                              var element = angular.element(document.getElementById('btnAddCompany'));
                              console.log(element.toString());
                              element.append(divTemplate);
                              $compile(element)($scope);
                        },
                          function(error) {
                              alert('An error occured in retrieving view. ' + error.message);
                          });
              };
          }
      ]);
  </code></pre>
  
  <p><strong>addClient.cshtml</strong></p>
  
  <pre><code>&lt;h1 class="text-center text-info"&gt;Add Client&lt;/h1&gt;
  &lt;br /&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
  
          &lt;form role="form" name="formAddClient"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="inputCompany"&gt;Company&lt;/label&gt;
                  &lt;input id="inputCompany" type="text"
                         class="form-control" ng-model="addClient.CompanyName" name="CompanyName"/&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="inputContactPerson"&gt;Contact Person&lt;/label&gt;
                  &lt;input id="inputContactPerson" type="text"
                         class="form-control" ng-model="addClient.contact_person" name="ContactPerson"/&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="inputEmailAddress"&gt;Email Address&lt;/label&gt;
                  &lt;input id="inputEmailAddress" type="text"
                         class="form-control" ng-model="addClient.email_address" name="EmailAddress"/&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  
          &lt;input type="button" id="btnAddCompany" class="btn btn-success"
                 value="Add Company" ng-click="addNewClient()"/&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>fileMaintenance.cshtml</strong> &lt;-- this is where I place the html template</p>
  
  <pre><code>&lt;div class="active tab-pane" id="file_maintenance"&gt;
      &lt;div&gt;
          &lt;a href="javascript:void(0);" ng-click="addClient()"&gt;Add Client&lt;/a&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="file_maintenance_view_area"&gt;
          &lt;div ng-bind-html="chosen_view"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!-- End of tab file_maintenance --&gt;
  </code></pre>
  
  <p>I also tried this code:</p>
  
  <pre><code>$scope.addClient = function () {
      $http.get('/FileMaintenance/AddClient')
          .then(function(response) {
              var divTemplate = response.data;
              var temp = $compile(divTemplate)($scope);
              var ele = angular.element(document.getElementById('btnAddCompany')).append(temp);
          },
              function(error) {
                  alert('An error occured in retrieving view. ' + error.message);
              });
  };
  </code></pre>
  
  <p>but if I do it like this code, I can't even get my template html to show.</p>