Angular directive to replace itself

by Mark Coleman

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<row>***</row>

CSS

row {
    color: red;
}

JavaScript

angular.module('myApp',[])
.directive('row', function($compile) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element[0].outerHTML ='<div>I should not be red</div>';
            $compile(element.contents())(scope);
        }
    }
});