JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<div>
    <div video-clip-details> 
        <div file-library></div>
    </div>
</div>

JavaScript

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

testapp.directive('fileLibrary', function () {
        return {
            template: '<div ng-click="doSomethingInVideoClipDirective()">library</div>',
            require: '^videoClipDetails',
            restrict: 'AE',
            link: function postLink(scope, element, attrs, videClipDetailsCtrl) {
                scope.doSomethingInVideoClipDirective = function() {
                    videClipDetailsCtrl.doSomething();
                }
            }
        };
    });

 testapp.directive('videoClipDetails', function () {
        return {
            template: '<div>clip details<div ng-transclude></div></div>',
            transclude: 'true',
            restrict: 'AE',
            controller: function($scope, $element) {
                this.doSomething = function() {
                    console.log('I did something');
                }
            },
            link: function postLink(scope, element, attrs) {
                console.log('videoClipDetails directive');
                //start the element out as hidden
            }
        };
    });