Void Element Test in Angular

Create a custom AngularJS Directive and test its behavior when we use it as a void element.

HTML

<!--
Although legal HTML syntax, AngularJS improperly manipulates DOM when processing a custom directive as a Void Element.
http://www.w3.org/TR/html-markup/syntax.html#void-element
Same behavior in 1.3.0-rc.1
-->
<div ng-app="myApp">
    <div ng-app="mainController">
        <div>
            <voidtagtest></voidtagtest>
            <p>Example 1 - stays peer</p>
        </div>
        <div>
            <voidtagtest/>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .controller('mainController', function ($scope) {
    $scope.message = 'a msg';
})
    .directive('voidtagtest', function () {
    return {
        restrict: 'E',
        template: '<div>hello</div>'
    };
});