Sanitize Angular JS with double curly bracers

Question

I am trying to display html that i got from server. Example of server response is something like this: '<p>Hello Mister {{first_name}}</p>';

So, in my controller I stored this response in $scope variable like this:

$scope.centralText.text = $sce.trustAsHtml(response_from_server)

On HTML side, I made binding:

<div ng-bind-html="centralText.text"></div>

and that results "Hello Mister {{first_name}}".

What I was making to accomplish is passing generic value for variable $scope.first_name to server response html.

Example:

$scope.first_name = "Luis Figo";

Output:

Hello Mister Luis Figo

Just to be clear: the html <p>Hello Mister {{first_name}}</p> is just dummy example, its can be anything else, so I couldn't hardcode.

Thanks for help!

Update

Here is plunker with my example.

Answer 1

You will need to use the $compile service to compile the html against your scope.

$compile($sce.trustAsHtml(response_from_server))($scope);