var app = angular.module('plunker', []);

app.config(function($provide){
  // $provide provider is used to register the components in angular internally.
  
  // use decorator to customise the behaviour of a service. 
  $provide.decorator('$exceptionHandler', ['$delegate', function($delegate){
    
    // exception: exception associated with the error
    // cause: optional information about the context in which the error was thrown.
    
    return function(exception, cause) {
      exception.message = 'Please contact the Help Desk! \n Message: ' + exception.message;
      
      // $delegate: provides the original service to the method which is used to call the base implementation
      // of $exceptionHandler service which internally delegates to $log.error.
      $delegate(exception, cause);
      
      alert(exception.message);
    };
  }]);
  
});
app.controller('MainCtrl', function($scope) {
  $scope.cancelBtnText = 'Cancel Editing';
  $scope.cancelForm = function(){
    $log.info('user requested to cancel the form!');  
  };
});


<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h3><a href="#">http://www.siddharthpandey.net</a></h3>
  <h3>Learn how to handle exceptions in AngularJS using $exceptionHandler service</h3>

  <input type="text" disabled="disabled">
  <button data-ng-click="cancelForm()">{{cancelBtnText}}</button>

</body>

</html>
/* Put your css in here */