AngularJs jQuery: Add HTML dynamically

Question

I am trying to add rows and columns dynamically into an HTML table with an button on the column header which pop-up an alert message withe angularJs ng-click.

My columns and rows are added correctly withe jQuery, however, when the button is clicked, it doesn't call my alert function "hello()" in the controller! 

here's my jsfiddle link for the issue: https://jsfiddle.net/said_kossouri/cw3f119h/

HTML:

<div ng-app ng-controller="LoginController">
 <table  border="1" id="mtable" class="table table-striped">
      <thead><tr>
          <td>Item</td>
          <td><button id="deleteColl">Ok</button></td>

        </tr></thead>

      <tbody><tr>
        <td>Some Item</td>
        <td><input type="text"/></td>

      </tr></tbody>

  </table><br/>
  <button ng-click="addRow()" id="irow">+ Row</button>
  <button ng-click="addCol()" id="icol">+ Column</button>

JS:

function LoginController($scope) {
    $scope.addRow = function () {
    $('#mtable tbody').append($("#mtable tbody tr:last").clone());
    $('#mtable tbody tr:last :checkbox').attr('checked',false);
    $('#mtable tbody tr:last td:first').html($('#row').val());
  }
      
  $scope.addCol = function () {
    $('#mtable tr').append($("<td>"));
    $('#mtable thead tr>td:last').html('<button ng-click="hello()">Hello!</button>');
    $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="text">'))});   
  }  
  
  $scope.hello = function () {
    alert("HELLO");
  }
            
}

Answer 1

i found exactly what i was looking for in the answer for the issu in the link and the code below: create a dynamic json matrix by using angularjs

    angular.module('App', [])
    .controller('MainCtrl', ['$scope', function($scope) {
      $scope.matrix = [[0]];
      
      $scope.addColumn = function() {
        $scope.matrix.forEach(function(row) {
          row.push(0);
        });
      };
      
      $scope.addRow = function() {
        var columnCount = $scope.matrix[0].length;
        var newRow = [];
        for (var i = 0; i < columnCount; i++) {
          newRow.push(0);
        }
        $scope.matrix.push(newRow);
      };

      $scope.deleteRow = function(idx) {
        if (idx >= 0 && idx < $scope.matrix.length) {
          $scope.matrix.splice(idx, 1);
        }
      };
      
      $scope.deleteColumn = function(idx) {
        if (idx >= 0 && idx < $scope.matrix[0].length) {
          $scope.matrix.forEach(function(row) {
            row.splice(idx, 1);
          });
        }
      };

    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <div ng-app="App" ng-controller="MainCtrl">
      <table>
        <tbody>
          <tr>
            <th></th>
            <th ng-repeat="column in matrix[0] track by $index">
              <button ng-disabled="matrix[0].length <= 1"
                      ng-click="deleteColumn($index)">
                Delete
              </button>
            </th>
          </tr>
          <tr ng-repeat="row in matrix">
            <th>
              <button ng-disabled="matrix.length <= 1"
                      ng-click="deleteRow($index)">
                Delete
              </button>
            </th>
            <td ng-repeat="column in row track by $index">
              <input type="number" ng-model="row[$index]">
            </td>
          </tr>
        </tbody>
      </table>
      <button type="button" ng-click="addRow()">Add Row</button>
      <button type="button" ng-click="addColumn()">Add Column</button>
      <h3>As JSON:</h3>
      <pre><code>{{matrix | json}}</code></pre>
    </div>