directives scope overwriting issue

<!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="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>

<body>
  <first-directive></first-directive>
  <second-directive></second-directive>
  
  <script>
    angular.module('plunker', [])
      .directive('firstDirective', function() {
        return {
          restrict: 'E',
          template: '<div>First directive: {{ vm.msg }}</div>',
          controller: function() {
            var vm = this;
            vm.msg = 'Hi';
          },
          controllerAs: 'vm'
        };
      })
      .directive('secondDirective', function() {
        return {
          restrict: 'E',
          template: '<div>Second directive: {{ vm.msg }}</div>',
          controller: function() {
            var vm = this;
            vm.msg = 'Hello World';
          },
          controllerAs: 'vm'
        };
      });      
  </script>
</body>

</html>

/* Put your css in here */

.widget {
  border: 1px solid;
  padding: 5px;
}

label {
  font-weight: bold;
}