Javascript functions doesn't work in the new innerHTML

Question

I am new to angular js and i am working on monaca ide to make a hybrid app which uses onsen-ui and i wrote the following code and when the response comes from the server it isn't using the javascript methods for eg the {{"hello"}} at the last line is shown in the browser as {{"hello"}} only and because of that i think that the new code doesn't follow the rules of javascript files

                  this.find=function(){
    //ajax start
    
            $http({
    method :"POST",
    url : "http://www.ashishmalgawa.xyz/rakt/finder.php",
   headers: {
   'Content-Type': "application/x-www-form-urlencoded; charset=UTF-8"
 },    
   data: "date="+$rootScope.dob
  }).then(function mySucces(response) {
      document.getElementById("results").innerHTML = response.data;
      $scope.search=false;
                
    }, function myError(response) {
      $scope.hellow = response.statusText;
  });
     
    //ajax end         
                   }
 

<ons-list>
<?php
/* DBMS related code
*/
?>
 <ons-list-item ng-click="" modifier="tappable">
      <?php
            while($r=$re->fetch_assoc()){
                echo $r['name']."<br>";
                echo $r['gender']."<br>";
                echo "$distance kms away";
                
            }
         ?>
    </ons-list-item>
    <?php
    }
     }
}
else{
    echo "No Results Found";
}
$conn->close();         

?>
    </ons-list>
{{"hello"}}

Thanks in advance :)

Answer 1

No, this will not work, because <ons-list> etc, is not plain html, its an Angular component.

You should return a JSON of data, and then render it on the client side the angular way.