JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/cupertino/jquery-ui.css">
<!doctype html>
<html>
    <head>
        <title>AngularJS with jQuery UI - Sample with Dialog</title>
    </head>
    <body>
        <div ng-app="manager" ng-controller="MainCtrl">
            <button ng-click="openDialog()">Open Dialog</button>
            <div x-ui-dialog when="showPopupCondition" dialogProps="{{dialogProps}}" scopeProps="{{scopeProps}}">
             <div>This is my dynamic popup. You pass the pop up URL from parent scope</div>
             <div class="info">
                 <label>Firstname:</label> <span ng-bind="firstName"></span><br />
                 <label>Lastname:</label> <span ng-bind="lastName"></span><br />
                 <label>Homepage:</label> <a ng-href="{{homepage}}" ng-bind="homepage" target="_blank"></a><br />
                 <label>Twitter:</label> <a ng-href="http://twitter.com/{{twitter}}" ng-bind="'@'+twitter" target="_blank"></a><br />
             </div>
              <div><button ng-click="$parent.handleBtnClick()">Click to call a method in parent scope</button></div>
            </div>
        </div>
    </body>
</html>

CSS

div {
   padding: 20px; 
}
div.info {
   border: 1px solid #CECECE;
}

JavaScript

var appModule = angular.module('manager', []);

appModule.controller("MainCtrl", ['$scope', function($scope) {
    $scope.showPopupCondition = false;
    $scope.dialogProps = {
        autoOpen: true,
        width: 460,
        height: 330,
        modal: true,
        title: "jQuery UI Dialog with AngularJS",
        draggable: false,
        resizable: false
    };
    $scope.scopeProps = {
        firstName: "Sameer",
        lastName: "Gupta",
        homepage: "http://www.codecurry.com/",
        twitter: "samunplugged"
    };
    $scope.openDialog = function() {
        $scope.showPopupCondition = true;
    };
    $scope.handleBtnClick = function() {
        alert($scope.scopeProps.firstName + " says: Hello!");
    }
}]);

appModule.directive('uiDialog', function($templateCache, $document, $compile) {
 return {
    terminal: true,
    link: function(scope, element, attrs) {
       var dialogElement,
       dialogScope, dialogUiProps, scopeProps,
       dialogTemplate = element.contents();
       element.remove();
       scope.$watch(attrs.when, function(show) {
          if (show) {
             dialogScope = scope.$new(); // maybe even use $rootScope instead
             scopeProps = scope.$eval(attrs.scopeprops);
             dialogUiProps = scope.$eval(attrs.dialogprops);
             console.log(scopeProps);
             angular.extend(dialogScope, scopeProps);
             
             dialogElement = $("<div></div>");
             dialogElement.append(dialogTemplate.clone());
             $document.append(dialogElement);
             $compile(dialogElement)(dialogScope);
             
             dialogElement.dialog(dialogUiProps);
             
             dialogElement.bind('dialogclose', function(event, ui) {
                scope.$apply(function() {
                   dialogScope.$destroy();
                   dialogElement.remove();
                   dialogElement = null;
                   scope.$eval(attrs.when+" = false");
              ...