Child component not receiving broadcast from parent

Question

I'm building a simple grid component with Angular 1.5 component. The structure is:

<grid-component>
    <grid-header>
        <grid-cell key="one">Column One</grid-cell>
        <grid-cell key="two">Column Two</grid-cell>
        <grid-cell key="three">Column Three</grid-cell>
    </grid-header>
    <grid-row ng-repeat="item in ctrl.items" model="items">
        <grid-cell key="one">{{ items.one }}</grid-cell>
        <grid-cell key="two">{{ items.two }}</grid-cell>
        <grid-cell key="three">{{ items.three }}</grid-cell>
    </grid-row>
</grid-component>

The <grid-component> broadcasts an event to <grid-header>, but the header component is not receiving the message.

Here is a simple example of my usage.

app
.component('gridComponent', {
    controller: function($scope) {
        this.$onInit = function() {
            resource.getItems()
                .then(function(items) {
                    $scope.broadcast('update', items);
                }); 
        };
    }
})
.component('gridHeader', {
    controller: function($scope) {
        $scope.on('update', function(event, items) {
            controller.items = items;
        });
    }
});

The interesting thing is that when I inspect the scopes, they are actually siblings in the scope hierarchy.

Parent

{
    childHead: null,
    $$childTail: null,
    $$destroyed: false,
    $$isolateBindings: Object,
    $$listenerCount: Object,
    $$listeners: Object,
    $$nextSibling: null,
    $$phase: null,
    $$prevSibling: null,
    $$watchers: null,
    $$watchersCount: 0,
    $ctrl:module.exports.controller,
    $id: 80,
    $parent: {
        $$ChildScope: null,
        $$childHead: h,
        $$childTail: h,
        $$listenerCount: Object,
        $$listeners: Object,
        $$nextSibling: null,
        $$prevSibling: null,
        $$transcluded: true,
        $$watchers: Array[4],
        $$watchersCount: 4,
        $id: 79,    <---
        $parent: {}
    }
}

Child

{
    childHead: null,
    $$childTail: null,
    $$destroyed: false,
    $$isolateBindings: Object,
    $$listenerCount: Object,
    $$listeners: Object,
    $$nextSibling: null,
    $$phase: null,
    $$prevSibling: { parentObject }, <---
    $$watchers: null,
    $$watchersCount: 0,
    $ctrl:module.exports.controller,
    $id: 91,
    $parent: {
        $$ChildScope: null,
        $$childHead: h,
        $$childTail: h,
        $$listenerCount: Object,
        $$listeners: Object,
        $$nextSibling: null,
        $$prevSibling: null,
        $$transcluded: true,
        $$watchers: Array[4],
        $$watchersCount: 4,
        $id: 79, <---
        $parent: {}
    }
}

Note id of the parent for both are the same. Also, note that the prevSibling of the child is the parent.

If I change $scope.$broadcast to $scope.$parent.$broadcast it works as expected because they are siblings.

Why does Angular see these as siblings when they're nested components, and is there a way to broadcast events without having to walk the $parent chain?