Angular: Directive Inheritance Hack

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-controller="Demo">
    <input ng-Model="name">
    <copy-widget base val="name"></copy-widget>
    <copy-widget base val="name"></copy-widget>
</div>

CSS

div { padding: 10px; cursor: pointer; background: #eee; }

JavaScript

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

myApp.directive('base', function(){
    return {
        controller: function($element) {
            this.addRedBorder = function(){
                $element.css("border","1px solid red");
            }
            this.addBlueBorder = function(){
                $element.css("border","1px solid blue");
            }            
        }
    }
});

myApp.directive('copyWidget', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            val: '='
        },
        require: '^base',
        template: '<div ng-click="base.addBlueBorder()"><b>{{val}}</b></div>',
        link: function(scope, element, attr, basectrl){
            scope.base = basectrl;
        }  
    }
});

function Demo( $scope ) {
    $scope.name = "Click Here"
}