AngularJS + PHP search Parse html

Question

i've been working on a small project that includes a simple search engine with PHP + AngularJS.

The problem is that when the keyword doesn't exists in an array it fires an error message which include HTML code. The HTML code doesn't seem to be parsed by itself, i just get plain html code.

Here's my code so far [AngularJS]

  function searchRares($scope, $http) {
  $scope.url = 'search.php';

  $scope.search = function() {

    $http.post($scope.url, { "data" : $scope.keywords}).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.result = data;
    })
    .
    error(function(data, status) {
      $scope.data = data || "Bad response";
      $scope.status = status;     
    });
  };
}

My php file [search.php]

<?php
$data    = file_get_contents("php://input");
$key     = json_decode($data);

$words = ['stackoverflow', 'ask', 'answer'];

if(!in_array(strtolower($key->data), $words))
{
    echo"
    <div class=\"ui error message\">
         Not found
        </div> ";
}
else
    echo $key->data;
?>

(edit) I forgot the html code

<div class="ui raised form segment" ng-controller="searchRares">


    <div class="ui action input">
      <input type="text" ng-model="keywords" placeholder="KeyWord..">
       <div class="ui blue right labeled icon button" ng-click="search()"> Search </div>   
   </div>

<div ng-model="result">
{{result}}
</div>
</div>

Any help would be appreciated! Thanks - Eraik

Answer 1

If I'm understanding your question correctly, you want to parse the "HTML" that you return from your PHP script using Angular.

You can do so using Angular's $apply .

That said, returning HTML is bad practice. You should return JSON instead, and then you can automatically update your $scope without needing $apply .