AngularJs and jQuery UI, how to ensure no UI code in controller

I am using AngularJS as the framework for building a web app. The DI is good for unit testing and AnguarJS also has a best practice that not have DOM UI related code in controller. I am also using jQuery UI for building UI. Then I have a problem:

For example I am using jQuery UI dialog http://jqueryui.com/dialog/#modal-confirmation, so in the HTML I have the code for declaring the dialog:

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Then I have a button by clicking on it the dialog will pop up

<a ng-click="showDialog()>Click me</a>    

Then in the controller I have the code

$scope.showDialog = function() {
    $('#dialog-confirm').dialog( //DOM UI code in controller!
        //...
    });
}

This is the basic workflow by following jQuery UI demo code: http://jqueryui.com/dialog/#modal-confirmation and I just combined it with AngularJS. It works, but I think there is a big problem in my code: I mixed DOM UI code and logic in my controller thus it breaks the test-ability of the controller.

What should I do to use jQueryUI with AngularJS without breaking DI principle and test-ability?