Angular: jQuery UI dialog

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/0.10.6/angular-0.10.6.js"></script>
<div ng:controller="Ctrl">
  <abt:dialog>
    <button>open dialog</button>
    <div id="test-dialog">
        Type here:<input ng:model="savedInput" /><br />{{savedInput}}
        You typed: {{savedInput}}<br />
        <!-- Buttons section -->
        <button ng:click="cancel()">Cancel</button>
    </div>
  </abt:dialog>

    savedInput = {{savedInput}}
</div>

JavaScript

function Ctrl() {
    this.savedInput = 'default';
    this.cancel = function() {
        alert('cancel');
    };
}

angular.widget('abt:dialog', function() {
    // compile the content
    this.descend(true);
    this.directives(true);

    return function(element) {
        var children = element.children();
        var control = children.first();
        var content = children.last();


        // Create the jQuery dialog.
        content.dialog({
            'autoOpen': false,
            'draggable': false,
            'modal': true,
            'resizable': false
        });
        control.click(function(event) {
            content.dialog('open');
        });
    };
});