Reusable JQuery UI dialog does not work from AngularJS partial - jquery-ui

Question

I am trying to use JQuery UI Dialog from AngularJS partial HTML pages.
The problem is that the dialog works fine, and even can be opened multiple types, from a view - as long as the view is opened for the 1st time.
Yet when navigating to another view, and then back to the view using the dialog - an attempt to open the dialog works as if there would be 2 dialogs to show, not one. Browser "refresh" of the view URL makes the problem disappear, till the next back-and-forth navigation.
I put a test application (not integrated with real back end) to show the problem:
Navigate to:
http://socialtodow.cloudapp.net/app/tdg_test/#!/new
Click on red "Get Advice" button: the dialog shows up OK, and can be closed with Esc.
Now, please navigate to http://socialtodow.cloudapp.net/app/tdg_test/#!/search and then back to http://socialtodow.cloudapp.net/app/tdg_test/#!/new
Click red "Get Advice". You get 2 dialogs, one on top of another - the buggy behavior I am talking about.
The relevant directive code:
.directive('advice', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var self = $(element),
adviceDialog = $(attrs.advice);
adviceDialog.dialog({
width: 260,
height: 405,
autoOpen: false,
modal: true,
dialogClass: "advice_dialog"
});
self.click(function () {
adviceDialog.dialog('open');
});
adviceDialog.find('button').click(function() {
adviceDialog.dialog('close');
});
}
}
}])
Checking
adviceDialog.is('dialog'))
does not seem to work - it's always true.
I am looking for a fix (not infrastructure replacement).
Any hint will be appreciated.
Max.

Answer 1

This is the modification to the directive, found by a developer wokring on the project, that seems to resolve the issue:
.directive('advice', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var self = $(element),
adviceDialog = $(attrs.advice);
self.click(function () {
adviceDialog.dialog({
width: 260,
height: 405,
autoOpen: false,
modal: true,
dialogClass: "advice_dialog",
close: function() {
adviceDialog.dialog('destroy');
}
});
adviceDialog.dialog('open');
});
adviceDialog.find('button').click(function() {
adviceDialog.dialog('close');
});
}
}
}])
Note: the URl mentioned in the original question may not be operational - sorry for that.
Max.