Теги AngularJS не работают в innerHTML

Question

В моем коде у меня есть таблица, которая заполнена тегом ng-repeat., И все в порядке. Нажав кнопку, в эту таблицу добавляется строка innerHTML. Эта новая строка должна содержать 2 клетки:

• select
• input-field + подтверждающего button

Я хочу, чтобы заполнить select с ng-option тегом, и это не будет случился. Теги angularJS (и любой скрипт или функция, которую я пытаюсь вставить), привитые с помощью innerHTML, не работают.

methods - это JSON, содержащий 3 способа оплаты (PayPal, Postepay, Skrill).

payment_methods содержит способы оплаты пользователем (метод + примечания).

Если я пытаюсь добавить код innerHTML просто на html-странице, все это работает, поэтому нет ошибок в HTTP-запросах или тэгах angularJS.

Любое решение? Благодарю.

$http.get('/api/v1/getUserPaymentMethods', {params: {"idUser": myService.get()}}).success(function (data) { 
    $scope.payment_methods = data; 
}); 

document.getElementById('insert-btn').onclick = function() { 
     var table = document.getElementById('table'); 
     var row = table.insertRow(table.length); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 

     cell1.innerHTML = 
      "<select ng-model=\"selectedMethod\" " + 
       "ng-options=\"method.method for method in methods\">" + 
        "<option value=\"\" disabled selected>Method</option>" + 
      "</select>"; 

     cell2.innerHTML = 
      "<div class=\"input-field\" style=\"display:inline-block; width: 87%\">" + 
       "<input type=\"text\" ng-model=\"notes\" id=\"notes\">" + 
      "</div>" + 
      "<div style=\"display:inline-block; width: 10%\"> " + 
       "<button id=\"confirm-btn\">done</button>" + 
      "</div>"; 

     $http.get('/api/v1/getMethods').success(function (data) { 
      $scope.methods = data; 
     }); 
    } 
} 

document.getElementById('confirm-btn').onclick = function() { 
    // save data 
} 

HTML:

<table id="table"> 
<thead> 
<tr> 
    <th style="width: 30%;" data-field="id_payment_method">Method</th> 
    <th data-field="notes">Notes</th> 
</tr> 
</thead> 

<tbody> 
<tr ng-repeat="payment_method in payment_methods"> 
    <td>{{payment_method.id_payment_method}}</td> 
    <td>{{payment_method.notes}}</td> 
</tr> 
</tbody> 

<div style="bottom: 50px; right: 50px;"> 
    <button id="insert-btn">add payment method</button> 
</div> 

Answer 1

С Угловое вы не должны создавать HTML вручную, но сделать что-то вроде этого:

<table id="table"> 
<thead> 
<tr> 
    <th style="width: 30%;" data-field="id_payment_method">Method</th> 
    <th data-field="notes">Notes</th> 
</tr> 
</thead> 

<tbody> 
<tr ng-repeat="payment_method in payment_methods"> 
    <td>{{payment_method.id_payment_method}}</td> 
    <td>{{payment_method.notes}}</td> 
</tr> 
<tr> 
    <td> 
     <select ng-model="selectedMethod" ng-options="method.method for method in methods" > 
     </select> 
    </td> 
    <td> 
     <input type="text" ng-model="notes" id="notes"/> 
    </td> 
</tr> 
</tbody>