angular command in ng-bind-html

Question

I'm trying to use $interpolate and ng-bind-html to bind the data of my scope variable to a html string by this answer . Now when my scope variable's value is updating the ng-bind-html result, its not updating.

I don't want to call $interpolate every time that my scope updates.

This is my controller code:

$scope.TitleFlag= true;
$scope.HtmlContent = "<div>{{TitleFlag}}</div>";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
$scope.TitleFlagToggle = function(){
    $scope.TitleFlag= !$scope.TitleFlag;
  };

And this is my view code:

<div>{{TitleFlag}}</div> <!-- This is update correctly -->
<div ng-bind-html="trustedHtml"></div> <!-- This is not update -->
<button class="button" ng-click="TitleFlagToggle()"></button>

Answer 1

While the TitleFlag is changing we need to interpolate it. So put the $scope.trustedHtml also in click function too.

$scope.TitleFlag= true;
$scope.HtmlContent = "<div>{{TitleFlag}}</div>";
$scope.trustedHtml = $interpolate($scope.HtmlContent)(  $scope);
$scope.TitleFlagToggle = function(){
  $scope.TitleFlag= !$scope.TitleFlag;
  $scope.trustedHtml = $interpolate($scope.HtmlContent)(  $scope);
};

http://plnkr.co/edit/rRjHOY2xSiAZ8EtzviqK?p=preview