JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div test-no-replace></div>
<div test-replace></div>

JavaScript

var app = angular.module('test', []);
    
app.directive('testNoReplace', function() {
    return	{
    	restrict: 'EA',
        template: '<div ng-if="true">{{ dir.hello }}<div>',
        scope: {},
        link: function(scope) {
            scope.dir = {
                hello: 'no replace'
            };
        }
    };
});
    
app.directive('testReplace', function() {
    return	{
    	restrict: 'EA',
        template: '<div ng-if="true">{{ dir.hello }}<div>',
        scope: {},
        replace: true,
        link: function(scope) {
            scope.dir = {
                hello: 'replace'
            };
        }
    };
});

angular.bootstrap(document, ["test"]);