ng-click in the inner template of the directive is not providing the functionality

Your directive has its own isolated scope. So function 'hi' should be inside directive's scope. If you want to pass your controller's function you should do binding, like scope: { ..., hi: '&' } and then <you-directive hi='hi' ..>. Here is a link to documentation about this: Understanding Transclusion and Scopes.

So just adding it in linking function is enough:

  link: function(scope, element, attrs) {
  scope.hi = function() { alert("hi"); }

Here is updated fiddle: http://jsfiddle.net/GwBAh/

I don't know if this is the best way but you can use $parent in directive to access parent scope.

<a ng-click="$parent.hi();">parent</a>

Here is link to full fiddle example: http://jsfiddle.net/EKDse/

The whole idea of isolate scopes is exactly to avoid 'sharing' things between parent<->child scopes, somehow protecting them from being exposed and (unintentionally) changed by other directives/controllers.

If you really want to avoid the isolate scope and share the parent's scope, try this:

Start by removing the directive's scope definition (commented below):

transclude: true,
/*scope: { title:'@zippyTitle' },*/

Then place the attributes (attrs) from the directive element on the directives' scope:

scope.attrs = attrs;

Note: By doing this the attrs property will also be available on the parent (Ctrl3) scope.

And finally define the title based on the scope.attrs

  template: '<div>' +
              '<div class="title">{{attrs.zippyTitle}}</div>' +
              '<div class="body" ng-transclude></div>' +
                        '<a ng-click="hi();">hi</a>' +
            '</div>',

jsFiddle: http://jsfiddle.net/NNDhX/1/