JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app='myApp'>
    <div class="well">The 'inner' directive has a compile function that uses elem.replaceWith and replaces the element with a checkmark icon:
    <div class="box" inner></div>
    </div>

    <div class="well">The same directive, used inside a transclusion, <span class="strike"> doesn't</span> does replace the element. <small>(Should be seeing a checkmark icon instead of the red box, <span class="addition">and there it is.</span>)</small>
    <div outer><div class="box" inner></div></div>
    </div>

</div>

CSS

body {
    margin: 20px 0;
}

.box {
    border: 2px dashed red;
    width: 16px; 
    height: 16px;
}

.strike {
    color: red;
    text-decoration: line-through;
}

.addition {
    color: blue;
}

JavaScript

// replaceWith

var myApp = angular.module('myApp', []);

myApp.directive('outer', function() {
    return {
        template: '<div ng-transclude></div>',
        transclude: true
    };
});

myApp.directive('inner', function($compile) {
    return {
        compile: function(tElem, tAttrs) {
            var htmlText = '<i class="icon-ok"></i>';
            //tElem.replaceWith('<i class="icon-ok"></i>');
            
            return function(scope, tElem, tAttrs) {
                tElem.replaceWith(htmlText); 
                $compile(scope);

            }
        }
    }
});