在onClick中显示一个对话框

在这个小提琴http://jsfiddle.net/WzEvs/286/中，我更新了一些代码，以便在单击按钮时才显示对话框。但是对话框没有显示。我需要以其他方式调用模块吗？

小提琴代码：

<div ng-app="app" dialog-form=""></div>


<button id="btnSave">Save Click</button>

angular.module("app", []);

  $(document).ready(function () {

        $("#btnSave").click(
            function () {
                showit();
            }            
        );
    });

function showit(){

    alert('here')

angular.module("app")
    .directive("dialogForm", function () {


    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

            element.dialog("open");
        }
    };
});
}

更新 ：

这是我为了将其显示为ng-click而尝试执行的操作，但未触发任何操作：

http://jsfiddle.net/WzEvs/300/

代码 ：

<table>
    <tr ng-controller="MyController" ng-click="showit()">Click</tr>
</table>

function MyController($scope) {

$scope.showit() = function() {

    alert('here')

angular.module("app")
    .directive("dialogForm", function () {


    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

            element.dialog("open");
        }
    };
});
};

应显示的内容：“确定”警报框“此处”。单击“确定”时，以上代码中将出现一个新对话框（称为dialogForm）。

显示的内容：好的更改框“这里”。当单击“确定”时，确定框消失，但不显示上述代码中的新对话框（称为dialogForm）。

更新 ：

接受的答案代码：

html：

<div ng-app="app">
    <div dialog-form=""></div>
    <button id="btnSave">Save Click</button>
</div>

javascript：

angular.module("app", []);

angular.module("app")
.directive("dialogForm", function() {
    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

                        angular.element("#btnSave").on("click", function () {
                element.dialog("open");
            });
        }
    };

});