ng-click property won't fire when placed on dynamically created button

Question

I am dynamically building a table based on what SQL returns me. In the example below, I can fill a table with the start time, end time and user with no issue:

var StartTime = document.createElement('td');
var EndTime = document.createElement('td');
var InUser = document.createElement('td');
StartTime.innerText = value[i].startTime;
EndTime.innerText = value[i].endTime;
InUser.innerText = value[i].inUser;

The output will be a table with the number of entries I have received from SQL. What I would like to do now is create another td element to add to the last column of the table. This will be a button that will allow me to show and hide certain rows. For some reason, the ng-click functionality does not work when I click the button. Below is how I create the td element and how I apply the button to it.

var ViewComments = document.createElement('td');
ViewComments.innerHTML = '<button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button>';//apply click functionality.

When Ctrl + Shift + C clicking on the table to view the elements on the page, I can see that the row has the exact values that I specified (ie the type, ng-click and class). The class property is working because I have the background of the button set to blue when highlighted which gives the "clicking effect." I am not sure why the ng-click functionality is not working because I have used ng-click before in the application where buttons are not dynamically created. I'm assuming this the issue? If so, is there a way to get the ng-click functionality to work on dynamically create buttons?

I see in this stackoverflow that they are using $compile: ng-click not working from dynamically generated HTML
Is this the only way to solve this problem?

Any help would be appreciated!

Answer 1

Why aren't you using angular utilities? This seems like a lot of work while it can be easily done with angular.

<table ng-if="values">
    <tr ng-repeat="value in values">
        <td>{{value.startTime}}</td>
        <td>{{value.endTime}}</td>
        <td>{{value.inUser}}</td>
        <td><button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button></td>
    </tr>
</table>

Inside your controller

$http.get(someUrl).then(function(data){
    $scope.values = data;
});


$scope.showHideComments = function() {
    // do your thing here
};

Answer 2

Yes go with compile .

As the doc says that

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

You can create a reusable directive which will take the dynamic string and compiles that.

An example

<div ng-controller="Controller">
  <element-create message='htmlString'></element-create>
</div>

Directive

angular.module("CompileDirective", [])
  .directive('elementCreate', ['$compile', function ($compile) {
      return { 
        restrict: 'E', 
        scope: {
            message: "="
        },
        replace: true,
        link: function(scope, element, attrs) {
            var template = $compile(scope.message)(scope);
            element.replaceWith(template);               
        },
        controller: ['$scope', function($scope) {
           ...
        }]
      }
  }])