在jQuery对话框中将jQuery UI元素与angularjs混合

我正在尝试使用angularjs自动完成一个对话框。首先，我只是想让一些数据绑定工作起来：

守则：

<div ng-app="">
        <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>
    </div>

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 250,
      width: 350,
      modal: true,
      buttons: {
            Ok: function() {
              $( this ).dialog( "close" );
            }
          }

    });


$( "#dialog-form" ).dialog( "open" );

但是绑定没有正常工作。我是AngualRJ的初学者，我不确定如果我不使用对话框会出什么问题

更新：如果删除对话框代码，它将按预期工作：

---

应该在Angular的框架内编写jQuery DOM操作，可以是在指令、动画或使用Angular.element

下面是我将代码转换为指令的示例：

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


// JS
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");
                    }
                }
            });

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

---

是否包含angular.js文件…？@Srinath是的，请查看问题更新