Replace 3rd party directive without decoration

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="replaceDirective">
    <div>
      <p>Replace 3rd party directive without decoration</p>
      <third-party-directive></third-party-directive>
    </div>
  </body>

</html>

angular.module('replaceDirective', []);

angular.module('replaceDirective').directive('thirdPartyDirective', function() {

  return {
    restrict: 'E',
    scope: {},
    templateUrl: '3rd-party-directive.html',
    link: function(scope, elem, attr) {
      scope.data = {
        name: "I am a 3rd-party-directive and I am not touchable!"
      };
    }
  };
});


// uncomment the following code to replace above directive in fly
// angular.module('replaceDirective').directive('thirdPartyDirective', ['$compile', function($compile) {

//     return {
//       restrict: 'E',
//       link: function(scope, elem, attr) {
//         // create the template in fly
//         var template = '<custom-directive></custom-directive>';
//         // create a new scope
//         var newScope = scope.$new();
//         // destroy the current scope if the current scope is not root scope or the new scope is not created by the current scope
//         //scope.$destroy();
//         // compile the in fly template
//         var compiled = $compile(template)(newScope);
//         // replace the current element by the newly compiled element
//         elem.replaceWith(compiled);
//       }
//     };
//   }])
//   .directive('customDirective', ['$timeout', function($timeout) {

//     return {
//       restrict: 'E',
//       scope: {},
//       templateUrl: 'custom-directive.html',
//       link: function(scope, elem, attr) {
//         $timeout(function() {
//           scope.data = {
//             name: "I am a custom directive!!"
//           };
//         });
//       }
//     };
//   }]);

/* Styles go here */

Recently, I got a requirement to enhance a directive in our product. 
As a Professional Service fork, obviously I don't have the access to modify the OOTB directive of the product. 
It is to me more like a 3rd-party library. 
Furthermore, the version of AngularJS is pretty old that we don't have any fancy modern function to utilize.
Luckily, I finally came up with the solution described in this sample to replace the OOTB directive with my custom directive dynamically with only basic functions of AngularJS.
Below are some key steps:
* First of all, create a directive with the exact same name as the 3rd party directive. This directive will "hijack" the 3rd party directive. In another word, both the 3rd party directive and this custom directive will be invoked when AngularJS detects the corresponding element tag in DOM.
* This custom directive needs to do the following several things:
 * Create a new scope.
 * Dynamically create and compile another custom directive that we want to use for replacing the OOTB directive with the new scope.
 * Replace the OOTB directive with the newly created custom directive.

This solution works for me in our project. If you found any concern about it, please share your idea. Thanks.

<div>
  <p>{{data.name}}</p>
</div>

<div>
  <p style="color:red;">{{data.name}}</p>
</div>