Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <replybox label="search"></replybox>
</div>

JavaScript

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

myApp.directive('replybox', function($rootScope) {
    var linkFn = function(scope, element, attrs) {
        console.log("element: " + element);
        var button = angular.element(element.children()[0]);
        console.log("active: " + document.activeElement);
        
        console.log("button: " + button);
        scope.showInput = false;

        button.bind("click", textbox, event);

        function textbox() {
            
            console.log('click');
            console.log("active: " + document.activeElement);
            var btn = angular.element(event.srcElement);
            console.log("btn: " + btn);
            var form = btn.parent();
            console.log("form: " + form);
            var htmlTxtBox = form.children()[1];
            var txtBox = angular.element(htmlTxtBox);
            console.log("htmlText: " + htmlTxtBox);
            console.log("textbox: " + txtBox);
            
            scope.$apply('showInput = true');
            htmlTxtBox.focus();
            txtBox.css("width","100px");
            txtBox.css({"width":"300px","transition":"1s"});
        }
    };
    return {
        link: linkFn,
        restrict: 'E',
        scope: {
            label: '@'
        },
        template: '<form><button ng-hide="showInput">{{label}}</button><input type="text" ng-show="showInput"></input></form>',
        transclude: true
    };
})

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}