JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="testApp">
<div bind-html-unsafe="testHTML"></div>
<button ng-click="testHTML = '<h5>Welcome :)</h5>'">Change to Smaller Text</button>
</div>
JavaScript
var app = angular.module('app', []);
app.controller('testApp', function( $scope ) {
$scope.testHTML = '<h1> Welcome :) </h1>';
});
app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
return function( $scope, $element, $attrs ) {
var compile = function( newHTML ) {
newHTML = $compile(newHTML)($scope);
$element.html('').append(newHTML);
};
var htmlName = $attrs.bindHtmlUnsafe;
$scope.$watch(htmlName, function( newHTML ) {
if(!newHTML) return;
compile(newHTML);
});
};
});