ng-include with controllerAs syntax

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="script.js"></script>
    <script src="controllerOne.js"></script>
    <script src="controllerTwo.js"></script>
    <script src="myDirective.js"></script>

  </head>

  <body ng-app="app">
    <div ng-include ng-controller="controllerOne as vm" src="'controllerOne.html'"></div>
    <div ng-include ng-controller="controllerTwo as vm" src="'controllerTwo.html'"></div>
  </body>

</html>

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

(function () {
    
    angular.module('app').controller("controllerOne", [controllerOne]);

    function controllerOne() {        
        var vm = this;
        vm.value = 'I was set in Controller 1!';
    }

})();

angular.module('app').directive('myDirective', [function () {
    return {
        restrict: 'E',
        controller: function () { },
        controllerAs: 'vm',
        link: function ($scope, element, attrs, vm) {
          vm.value = 'I am a directive.'
        },
        scope: {                
            },
        template: "<h3>{{vm.value}}</h3>"
    };
}]);

<h2>Controller 1 Has No directive</h2>
<h3>{{vm.value}}</h3>

<h2>Controller 2 has a directive</h2>
<h3>{{vm.value}}</h3>
<my-directive></my-directive>

(function () {
    
    angular.module('app').controller("controllerTwo", [controllerTwo]);

    function controllerTwo() {
        var vm = this;
        vm.value = 'I was set in Controller 2!';
    }

})();