JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<div ng-app="myApp">
	<test>
		<test-sub>nop</test-sub>
	</test>
</div>

JavaScript

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

m.directive('test', ['$compile', function(_compile){
	return {
		restrict: 'E',
        replace: true,
		controller: ["$scope", function(_scope) {
			_scope.testItems = [];
			this.addItem = function(_obj) {
				_scope.testItems.push(_obj);
				console.log('addItem');
				console.log(_obj)
			}
		}],
		link: function(_scope, _element, _attrs, _controller) {
			console.log('--- test -------------------');
			var tmpl = "<test-sub>yep</test-sub>";
			// var tmplCompiled = _compile(tmpl)(_scope);
			_element.replaceWith(_compile(tmpl)(_scope));
		}
	}
}]);

m.directive('testSub', ['$compile', function($compile){
	return {
		restrict: 'E',
		require: '^?test',
		controller: ["$scope", function(_scope) {
		}],
		link: function(_scope, _element, _attrs, _controller) {
			console.log('--- testSub ----------------');
			_controller.addItem({x1:'x1',y1:'y1'});
		}
	}
}]);