Extending ASP.NET __doPostBack function with angular UI confirm modal dialog

<!DOCTYPE html>
<html data-ng-app="dcpApp">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="dialogService.js"></script>
    
    <script type="text/javascript" src="trustedHtmlFilter.js"></script>
    
  </head>

  <body >
  <h4>Look at console for __doPostBack function result</h4>
    <button id="button1" onclick="__doPostBack('button1', '')" 
      data-postback-confirm='Data will be saved to database. Do you want to proceed?'
      data-postback-confirm-title='Confirm Action' >PostBack button</button>
    <script type="text/javascript">
    function __doPostBack(eventTarget, eventArgument) {
      console.log('__doPostBack called with arguments: ', eventTarget, eventArgument);
    }
  </script>
  <script type="text/javascript" src="doPostBackOverride.js"></script>  
  </body>

</html>

(function(){
  
  angular.module('dcpApp', ['ui.bootstrap']);
  
})();

/* Styles go here */

Extending ASP.NET __doPostBack function with angular UI confirm modal dialog

(function() {
  angular.module('dcpApp').controller('HomeController', ['$scope', 'dialogService',
    function($scope, dialogService) {
      
      
    }
  ]);
})();

(function() {

  angular.module('dcpApp').factory('dialogService', ['$modal',
    function($modal) {

      function showDialog(title, body) {
        return $modal.open({
          template: '<div class="modal-header"><h3 class="modal-title">{{ title | trustedHtml }}</h3></div><div class="modal-body" >{{ body | trustedHtml }}</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
          controller: dialogController,
        }).result;

        function dialogController($scope, $modalInstance) {
          $scope.title = title;
          $scope.body = body;

          $scope.ok = function() {
            $modalInstance.close(true);
          };

          $scope.cancel = function() {
            $modalInstance.dismiss(false);
          };
        }
      }

      return {
        showDialog: showDialog
      };
    }
  ]);
})();

(function(){
  angular.module('dcpApp')
    .filter('trustedHtml', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);
})();

(function() {
  angular.module('dcpApp').run(['dialogService',
    function(dialogService) {

      var trueDoPostBack = window.__doPostBack;

      window.__doPostBack = function(eventTarget, eventArgument) {

        var target = angular.element(document.getElementById(eventTarget)),
          postbackConfirm = target.attr('data-postback-confirm'),
          postbackConfirmTitle = target.attr('data-postback-confirm-title')

        if (postbackConfirm) {

          dialogService.showDialog(postbackConfirmTitle, postbackConfirm)
            .then(function() {
              trueDoPostBack(eventTarget, eventArgument);
            });
        } else {
          trueDoPostBack(eventTarget, eventArgument);
        }
      };
    }
  ]);
})();