The controller in the "shahab" directive does not work. (Null)

Question

I have two directives and you want to access the controller that is defined in the directive hossein.

Directive

app.directive('hossein', function() {
  return {
    restricted: 'A',
    require: '?ngModel',
    scope: {
      name: '=ngModel'
    },
    link: function(scope, element, attributes, ngModel) {
      console.log(",,,,,,,,,,,,,,,,,,,", scope.name);
    },
    controller: function($scope) {
      var name = $scope.name;
      this.fu = function() {
        return name;
      }
    }
  }
});
app.directive('shahab', function() {
  return {
    restricted: 'A',
    require: '^?hossein',
    scope: {
      name: '=ngName'

    },
    link: function(scope, element, attributes, controll) {
      console.log(",,,,,,,,gfddfdfg,,,,,,,,,,,", controll);
      scope.name = controll.fu();
    }
  }
});

Markup

<div ng-app="app">
    <div ng-controller="maincontroller">
        <form ng-controller="newcontroller" name="myform" id="form">
            <h2>AngularJS</h2>
            <p>Name:
                <input name="user" type="text" hossein ng-model="name">
            </p>
            <p>Family:
                <input name="famil" type="text" shahab ng-name="">
            </p>
        </form>
    </div>
</div>

Answer 1

You must use the nested shahab and hossein directives , so you can access the external controller.

<hossein ng-model="name">

    <shahab ng-name="">

    </shahab>
</hossein>