**test.html**

```
<html>
<body ng-app="myApp" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <p>Response from process.php is : {{message}}</p>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http){
      $http({
        method : "post",
        url : "process.php"
      })
      .then(function(response){
        // First function handle success
        $scope.message = response.data;
      }, function(response){
        // Second function handle error
        $scope.message = response.status +' ('+ response.statusText + ' )';
      })
    });
  </script>
</body>
</html>

```

**process.php**

```
<?php
    $data = "<h1>Hey, how are you...???</h1>";
    echo $data;
?>

```

> 
> Response from process.html is : `<h1>Hey, how are you...???</h1>`
> 
> 
> 

You can see that the output is not as expected. It puts the **h1** element in the body. But the output should be an **heading**.
How can I do this..?? Any suggestions please.

**SOLVED**

```
<div ng-bind-html="messageHtml"></div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope, $http, $sce){
           $http({
                method : "post",
                url : "process.php"
              })
              .then(function(response){
                 // First function handle success
                 $scope.message = response.data;
                 $scope.messageHtml = $sce.trustAsHtml($scope.message)
               }, function(response){
                  // Second function handle error
                  $scope.messageHtml = response.status +' ('+ response.statusText + ' )';
              })
          });
    </script>

```