AngularJS custom directive ng-show/ng-hide

Warning: Angular newbie ahead.

I'm trying to create a custom widget that will show by default a "Reply" link, and when clicked, it should be hidden and a textarea should be shown. Here is what I have so far, but it doesn't work::

  .directive('replybox', function ($rootScope) {
    var linkFn = function (scope, element, attrs) {
        var label = angular.element(element.children()[0]);
        scope.showInput = false;

        label.bind("click", textbox);

        function textbox() {
            scope.showInput = true;
        }
    };
    return {
        link:linkFn,
        restrict:'E',
        scope:{
            id:'@',
            label:'@',
            showInput:'='
        },
        template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput">    </textarea>',
        transclude:true
    };
})

Any guideline will be appreciated. Thanks!