Component communication on AngularJS1.5

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <my-parent>loading...</my-parent>
  </body>

</html>

'use strict'

var MY_MODULE = 'myModule'

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

// Parent component
angular.module(MY_MODULE)
  .component('myParent', {
    controllerAs: 'parent',
    controller: function() {
      this.names = ['foo', 'bar', 'baz']
      this.message = ''

      this.onClickButton = function(name) {
        this.message = 'From child: ' + name
      }
    },
    template: (
      '<h1>Parent</h1>' + 
      '<my-child names="parent.names"' +
      '          on-child-fired="parent.onClickButton($name)"></my-child>' +
      '<div ng-bind="parent.message"></div>'
      ),
  })

// Child component
angular.module(MY_MODULE)
  .component('myChild', {
    bindings: {
      names: '=',
      onChildFired: '&',
    },
    controllerAs: 'child',
    controller: function() {
      this.onClicked = function(name) {
        this.onChildFired({'$name': name})
      }
    },
    template: (
      '<button ng-repeat="name in child.names" ng-bind="name"' +
      '        ng-click="child.onClicked(name)"></button>'
      ),
  })

/* Styles go here */