Can not bind html data on the view part using angular.js

Question

I need to bind some HTML part into the view using angular.js.

time.html:

<table class="table table-bordered table-striped table-hover" id="dataTable">
  <tr>
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
      <BR>Day <i class="fa fa-long-arrow-down"></i>
    </td>
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour.time_slot"></td>
  </tr>
  <tbody id="detailsstockid" >
   //Here my data will bind
  </tbody>
</table>

controller:

$http({
        method:'POST',
        url:"php/hodtime/getTimeTableData.php",
        data:userdata,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
        console.log('response',response);
        $("#detailsstockid").html(response.data);
    },function errorCallback(response) {

    });

response.data has the this output in the console:

<tr>
     <td width="100" align="center" style=" vertical-align:middle">Monday</td>
      <td width="100" align="center" style="padding:0px;">
           <table style="margin:0px; padding:0px; width:100%">
                 <tr>
                    <td><input type="text" name="itemname" id="coursemname" class="form-control" placeholder="Add sub name" readonly value="Mechanics of Solids" id="30"  ></td>
                 </tr>
                 <tr>
                     <td><input type="text" name="itemname"  class="form-control" placeholder="Add fac name" readonly value="" id=""  ></td>
                  </tr>
              </td>
              </table>
              </td>
              <td width="100" align="center" style="padding:0px;" >
                  <table style="margin:0px; padding:0px; width:100%">                        
                     <tr>
                        <td> <input type="text" name="itemname" id="coursemname" class="form-control" placeholder="Add sub name" readonly value="Engineering Materials" id="31"  ></td>
                     </tr>
                     <tr>
                        <td><input type="text" name="itemname"  class="form-control" placeholder="Add fac name" readonly value="" id=""  ></td>
                     </tr>
              </td>

I can not display the above HTML output on my view.

Answer 1

In your controller bind the response.data to a scope variable. to make it clearer:

In your controller:

$http({
        method:'POST',
        url:"php/hodtime/getTimeTableData.php",
        data:userdata,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
        console.log('response',response);
        $scope.variableName = response.data;
    },function errorCallback(response) {

    });

In your html use

<tbody ng-bind-html="variableName"></html>

In the loop it will create as many tbody with the response data as many times the loop will run