AngularJS Directive Scope Property Inheritance

HTML

<div ng-app="myApp">
  <control-field field-text></control-field>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style> .parent {
  background-color: tan;
}

​.ng-invalid {
  border: 1px solid red;
}

​

JavaScript

'use strict';

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


myApp.directive('controlField', function() {
  return {
	  restrict: 'E',
    controller: function() {
      console.log('controller control-field');
    }
  }
});

myApp.directive('fieldText', function() {
  return {
    restrict: 'A',
    require: '^controlField',
    link: function() {
      console.log('link field text');
    }
  }
});