I have a grandparent directive, parent directive and child directive as follows.

Grandparent component has a function say func() that I want to execute in child component

HTML in grand parent template invoking parent directive

<div ... on-item-drop="func()"></div>

Passed down to parent controller

parentController.ts

function parentDirective(): ng.IDirective {
        return {
            templateUrl($elem, $attr) {
               ...
            },
            scope: {
                ...
                OnDropExpr: "&onItemDrop"  <<<------ passing down the function expression, 
                                                     able to use this perfectly in parent component but not in child
            },
    }

HTML in parent template

<div list-control on-select-expr="OnDropExpr"></div>

This expression is further passed down to child

childcontroller.ts

function childDirective(): ng.IDirective {
            return {
                templateUrl($elem, $attr) {
                   ...
                },
                scope: {
                    ...
                    onSelectExpr: "&"  <-- passing down the function expression
                },
                link($scope: any, elem, attr, $ctrl: any[]) {
                    $scope.$on('dragnDropSelected', function(evt,data) {
                        if (attr.onSelectExpr) {
                            $scope.OnSelectExpr({ ... }); <<<------ this is not working
                        }
                });
            },
        }

angular.module("...", ...)
        .controller("listCtrl", ListController)
        .directive("listControl", listControlDirective());

Source: AngularJS Questions