When does the directive replace the element with the template?

I'm trying to write an AngularJS directive in which I replace the element with my specified HTML tags, then attach a keypress handler that calls a function on the directive's controller. Unfortunately that is not working for me. First off, here's the code I'm working with:

    .directive('amsNewEntry', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                url: '@navigateTo'
            },
            compile: function (tElement, tAttrs) {
                var text = tAttrs.text;
                var html = '<div>'
                         + '    <a href="#" data-ng-click="showInput">' + text + '</a>'
                         + '    <input data-ng-show="isInputFieldVisible" type="text" data-ng-model="inputValue" />'
                         + '</div>';
                tElement.replaceWith(html);
                return {
                    post: function (scope, element, attrs) {
                        console.log(element);
                        console.log(scope);
                        var input = $(element).find('input');
                        if (input.length > 0) {
                            console.log('attaching handler');
                            input.keypress(function (e) {
                                alert('keypress');
                                var code = e.which || e.keyCode;
                                if (code === 13) {
                                    alert('clicked enter');
                                    scope.navigate();
                                }
                            });
                        }
                    }
                }
            },
            controller: function ($scope, $location) {
                $scope.isInputFieldVisible = false;
                $scope.url = null;
                $scope.showInput = function () {
                    $scope.isInputFieldVisible = true;
                }
                $scope.inputValue = '';
                $scope.navigate = function () {
                    var target = $scope.url + '/' + $scope.inputValue;
                    console.log(target);
                    $location.path(target);
                }
            }

The thing is, in the post-linking function returned from the compile function, when I console out the element variable, it is still not being compiled to the HTML I specified. Shouldn't the tElement.replaceWith(html) line do that?

And one last thing, the input field renders visible on the screen although I'm using the ng-show directive and binding it to the isInputFieldVisible property which is initialized to false. Any ideas why this is not working?