JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<div ng-app="app">
	<div id="a" y="">
		<div id="b" y="">
			<div id="c" y=""></div>
		</div>
		<div id="d" y=""></div>
	</div>
</div>

JavaScript

var app = angular.module("app", []);

app.directive("y", function() {
	function Controller($element) {
		this.$element = $element;
		this.children = [];
	}
	
	Controller.prototype.register = function(child) {
		this.children.push(child);
	};
	
	Controller.prototype.execute = function() {
        console.log("PAYLOAD: " + this.$element.attr("id"));
		for( var i=0; i < this.children.length; i++ ) {
			this.children[i].execute();
		}
	};
	
	return {
		require: "y",
		controller: ["$element", Controller],
		link: function(scope, element, attrs, ctrl) {
			var e = element.parent(), nested = false;
			while( e != null ) {
				if( e.controller("y") != null ) {
					e.controller("y").register(ctrl);
					nested = true;
					break;
				}
                e = e.parent();
                if( typeof(e.tagName) === "undefined" ) break; //XXX
			}
			if( !nested ) ctrl.execute();
		}
	};
});