I am attempting to utilize $interpolate and ng-bind-html in order to bind the data from my scope variable to an html string as outlined in this solution. However, I have encountered an issue where the ng-bind-html result does not update when the value of my scope variable is updated.
It is important to me that I do not have to invoke $interpolate every time the scope updates.
Below is the code snippet from my controller:
$scope.TitleFlag = true;
$scope.HtmlContent = "<div>{{TitleFlag}}</div>";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
$scope.TitleFlagToggle = function(){
$scope.TitleFlag = !$scope.TitleFlag;
};
And here is the corresponding view section:
<div>{{TitleFlag}}</div> <!-- This updates correctly -->
<div ng-bind-html="trustedHtml"></div> <!-- This does not update -->
<button class="button" ng-click="TitleFlagToggle()"></button>