AngularJS - Using interpolation in a html template

Question

Not sure if anyone has come across this situation before, looking up on google I cant seem to find examples. Bascially I am creating a lenghty html template and i wrap it in a ng-bing-html, it loads my html but it dosent load my interpolation. Let me give you a quick example:

Controller:

$scope.example_text_here = "Hello World!"
$scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>"

HTML:

<div ng-bind-html="HTML_template"></div>

Output

Example: {{ example_text_here }}

What I am expecting:

Example: Hello world!

Anyone know how to accomplish this?

Answer 1

You should use $interpolate module and then injecting current scope or even $compile. See more https://docs.angularjs.org/api/ng/service/$interpolate

$interpolate($scope.HTML_template)($scope)

Answer 2

Try This

$scope.HTML_template = "<p><strong> Example: 
 </strong>"+$scope.example_text_here+"</p>";

Answer 3

I think you'd use $sce service of AngularJS.

Controller:

angular.module('app', [...])

.controller('myCtrl', function($scope, $sce) {
  ...
  $scope.trustAsHtml = function(params) {
    return $sce.trustAsHtml(params);
  };
  ...
  $scope.example_text_here = "Hello World!";
  $scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>";
  ...
});

Markup:

<div ng-bind-html="trustAsHtml(HTML_template)"></div>

Now hope you'd get your expected result. Thanks.