JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="mainController">
        {{test}}
        <form>
            <username></username>
            <submit></submit>
        </form>
    </div>
</div>

JavaScript

var app = angular.module("app", []);
app.controller("mainController", ["$scope", function($scope){
	$scope.test = "Greetings!"
}])
.directive("username", function(){
	return {
    	restrict: "E",
        controller: function($scope){
        	this.value = $scope.username;
        },
        template: "<div>username<input type='text' value='123' ng-model='username' /></div>"
    };
})
.directive("submit", function(){
	return {
    	restrict: "E",
        require: "username",
        link: function(scope, ele, attr, ctrl){
        	ele.bind("click", function(){
				console.log(ctrl.value);
            });
        },
        template: "<div><input type='submit' value='submit' /></div>"
    };
});