Trying to repro AngularJS bug

HTML

<div repro-parent data-insertion-method='append'>
        first outer text
        <div repro-child>
            first inner text
        </div>
    </div>

    <div repro-parent data-insertion-method='prepend'>
        second outer text
        <div repro-child>
            second inner text
        </div>
    </div>

CSS

div {
    margin: 10px;
}

[ng-controller='child'] {
    color: blue
}

JavaScript

var module = angular.module('test', []);
    
    module.directive("reproParent", function() {
        return {
            controller: function($element) {
                this.onLink = function() {
                    var insertionMethod = $element[0].dataset["insertionMethod"];
                    var newElement = document.createElement("span");
                    $element[insertionMethod](newElement);
                }
            },
            link: function(scope, element, attr, ctrl) {
                ctrl.onLink();
            }
        };
    });
        
    module.directive("reproChild", function() {
        return {
            controller : function($scope, $element) {
                $element.text("$element points to a " + $element.html());
            }
        };
    });
    
    angular.bootstrap(document.querySelector('body'), ['test']);