AngularJS directive isolate scope and parent scope

You have to pass the sayHi function to your directive. Directives create their own scope, So sayHi function is not part of your directive scope, the way to allow it is by creating a new prop an pass it.

HTML

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily"
          say-hi="sayHi(name)"
         ngTransclude></tree>
    </div>
</div>

JS

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

module.controller("TreeCtrl", function($scope) {
    $scope.treeFamily = {
        name : "Parent",
        children: [{
            name : "Child1",
            children: [{
                name : "Grandchild1",
                children: []
            },{
                name : "Grandchild2",
                children: []
            }]
        }, {
            name: "Child2",
            children: []
        }]
    };
    $scope.sayHi = function(name){
        alert(name+' says hello!')
    }
});

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        scope: {
            family: '=',
          sayHi : '&'
         },
        transclude: true,
        template: 
            '<p>{{ family.name }}</p>'+
            '<ul>' + 
                '<li ng-repeat="child in family.children">' + 
                    '<tree family="child" say-hi="sayHi(name)"></tree>' +
                    '<button ng-click="sayHi({name : child.name})">Say Hi</button>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});