Button from a dynamically added html tag does not invoke ng-click in angular

Question

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:

fileMaintenanceCtrl.js

/// <reference path="../angular.js" />

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);
                        });
            };
        }
    ]);

addClient.cshtml

<h1 class="text-center text-info">Add Client</h1>
<br />
<div class="row">
    <div class="col-md-6 col-md-offset-3">

        <form role="form" name="formAddClient">
            <div class="form-group">
                <label for="inputCompany">Company</label>
                <input id="inputCompany" type="text"
                       class="form-control" ng-model="addClient.CompanyName" name="CompanyName"/>
            </div>

            <div class="form-group">
                <label for="inputContactPerson">Contact Person</label>
                <input id="inputContactPerson" type="text"
                       class="form-control" ng-model="addClient.contact_person" name="ContactPerson"/>
            </div>

            <div class="form-group">
                <label for="inputEmailAddress">Email Address</label>
                <input id="inputEmailAddress" type="text"
                       class="form-control" ng-model="addClient.email_address" name="EmailAddress"/>
            </div>
        </form>

        <input type="button" id="btnAddCompany" class="btn btn-success"
               value="Add Company" ng-click="addNewClient()"/>

    </div>
</div>

fileMaintenance.cshtml <-- this is where I place the html template

<div class="active tab-pane" id="file_maintenance">
    <div>
        <a href="javascript:void(0);" ng-click="addClient()">Add Client</a>
    </div>
    <br />
    <div id="file_maintenance_view_area">
        <div ng-bind-html="chosen_view">

        </div>
    </div>
</div> <!-- End of tab file_maintenance -->

I also tried this 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);
            });
};

but if I do it like this code, I can't even get my template html to show.

Answer 1

You should $compile after the snippet is injected :

.then(function(response) {
   var divTemplate = response.data;
   var element = angular.element(document.getElementById('btnAddCompany'));
   element.append(divTemplate);
   $compile(element)($scope);
},

append() only append a string which when is parsed and inserted to the DOM. It does not consider links you have made to the $scope.