Angularjs basic transclusion with require

app.js

angular.module('testApp', [])
    .component('parent', {
        template: '<h2>{{$ctrl.title}}</h2><div ng-transclude></div>',
        transclude: true,
        controller: function() {
            this.title = 'Foobar'
        }
    })
    .component('child', {
        require: {
            parent: '^parent'
        },
        controller: function() {
            this.$onInit = function() {
                console.log(this.parent);
            };
        }
    });

index.html

<div ng-app="testApp">
    <parent>
        <p>Bacon ipsum dolor amet doner burgdoggen fatback salami shoulder brisket, shankle ribeye tongue chicken. Biltong andouille tenderloin tail burgdoggen tri-tip pork belly drumstick alcatra ham hock kevin. Frankfurter andouille salami, beef ribs sausage
            kielbasa strip steak tenderloin biltong turkey meatball.</p>
        <child></child>
    </parent>
</div>