Dynamic Angular Js Not working via innerHTML

If I add a row with Dynamic Angular JS variable, it is not working. Below is my code. Please help me let know the issue.

Also please note that the inner HTML in my original code is 600 lines long. In this example I have used simple div to simplify.

<div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>

<!DOCTYPE html>
<html>
<head> 

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 
});

</script>
  <script>
var app = angular.module('myApp1', []);
app.controller('AppCtrl', function($scope) {
 
 angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});
 
});


function replicateRegion() {
         
         var table = document.getElementById("idTable");
           var lastRow = table.rows.length;

           var row = table.insertRow(lastRow);

           var cell1 = row.insertCell(0);
           
         var sHTML =document.getElementById("idTableTD1").innerHTML;
         sHTML=sHTML.replace("_r", "_r" + lastRow.toString());
         sHTML=sHTML.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = sHTML;
         
        }

</script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button onclick="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
  
 
</td></tr>

</table>

</div> 
</body>

</html>

Only the first row which is static has the correct output. The rows added after button-click "Insert Row" have the problematic Angular JS output. Please help.

Solution

You need to add the code for replicateRegion() function inside the AngularJS controller and use the $compile service to bind the dynamically generated HTML into the AngularJS DOM.

var myapp = angular.module('myApp', []);

myapp.controller('AppCtrl', function ($compile, $scope) {
 
   
    $scope.a = 1;
    $scope.b = 2;
    $scope.replicateRegion = function(){
      var table = document.getElementById("idTable");
      var lastRow = table.rows.length;

      var row = table.insertRow(lastRow);

      var template = `<div data-ng-init="quantity_r=1;price_r=5">
               <h2>Cost Calculator Quantity:</h2>
               <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
             <div>
            Total in dollar: {{quantity_r * price_r}}
             </div>
             </div>`;
  
           var cell1 = row.insertCell(0);
         
         template=template.replace(/_r/g, "_r" + lastRow.toString());
         template=template.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = template;
          $compile(cell1)($scope); //Now compile it to render the directive.  
    }
        
            
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
 </div>
  
 
</td></tr>

</table>

</div>

Also notice that var template that specifies a generic template that should be inserted in the HTML dynamically on click. It is always a good practice to specify a static HTML template instead of extracting the generated HTML from the page and using that, which you have done.