How to call Modal Dialog (Custom html view) on Umbraco AngularJs

How to call Modal Dialog (Custom html view) on Umbraco AngularJs 


Background
- angularjs v1.x


view.html

<div ng-controller="myController">
    <div>
    <a class="btn" ng-disabled="actionInProgress" ng-click="toggleModal(functionA())" prevent-default>
        functionA
    </a>
    <a class="btn" ng-disabled="actionInProgress" ng-click="toggleModal(functionB())" prevent-default>
        functionB
    </a>
    <a class="btn" ng-disabled="actionInProgress" ng-click="toggleModal(functionC())" prevent-default>
        functionC
    </a>

    <modal-dialog callback-fn='actionName' show='modalShown' width='200px' height='15%'><p>Are you sure to proceed action?</p>
</div>

directive

'use strict';
var umbracoApp = angular.module('umbraco.directives');

umbracoApp.directive('modalDialog', function () {
    return {
        restrict: 'E',
        scope: {
            show: '=',
            actionName: '&callbackFn'            
        },
        replace: true, // Replace with the template below
        transclude: true, // we want to insert custom content inside the directive
        link: function (scope, element, attrs) {            
            scope.dialogStyle = {};
            if (attrs.width) {
                scope.dialogStyle.width = attrs.width;
            };
            if (attrs.height) {
                scope.dialogStyle.height = attrs.height;
            };
            scope.hideModal = function () {
                scope.show = false;
            };
            scope.confirmedClick = function () {
                scope.$eval(scope.actionName());                
                scope.show = false;
            };
        },
        templateUrl: "/App_Plugins/ThreewoodActiveDirectory/template/modal.dialog.html"        
    };
});

controller

'use strict';

(function () {
    // Create controller variable
    function myController($scope, $http, $injector, userService, notificationsService) {        

     $scope.modalShown = false;
        $scope.actionName = "";
        $scope.toggleModal = function (action) {
            $scope.actionName = action;
            $scope.modalShown = !$scope.modalShown;
        };

        $scope.functionA = function () {
            var fn = function () {
                alert("functionA");
            }
            return fn;
        };

        $scope.functionB = function () {
            var fn = function () {
                alert("functionB");
            }
            return fn;
        };

        $scope.functionC = function () {
            var fn = function () {
                alert("functionC");
            }
            return fn;
        };
               
    };


    // Register the controller    
    angular.module("umbraco").controller("myController", myController);
})();

modal dialog view

<div class='ng-modal' ng-show='show'>
    <div class='ng-modal-overlay' ng-click='hideModal()'></div>
    <div class='ng-modal-dialog' ng-style='dialogStyle'>                
        <div class='ng-modal-dialog-content' ng-transclude></div>                
        <div class="ng-modal-dialog-button">
            <button id="no" class="btn btn-warning" ng-click='hideModal()'>No</button>
            <button id="yes" class="btn" confirmed-action="actionName()" ng-click="confirmedClick()">Yes</button>
        </div>        
    </div>
</div>

modal dialog css

.ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.8;
}
.ng-modal-dialog {
  /* A centered div above the overlay with a box shadow. */
  z-index:10000;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
  text-align: center;
  border-radius: 10px;
}
.ng-modal-dialog-content {
  padding:10px;
  text-align: center;
  font-weight: bold;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

.ng-modal-dialog-button {

}