angularjs - Angular: How to get sibling directive value from directive? -

here jsfiddle.
html:

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

and js:

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>"     }; }); 

i want username input value when submit button clicked. have done wrong?
can me?
cheers!

require can search or it's parents, scope easier, avoid using scope , use require controller , u need custom form directive , both username , submit require it's controller