Edit in JSFiddle

angular
	.module('app', [])
  .component('parentComponent', {
  	transclude: true,
    template: '<div ng-transclude></div>',
  	controller: function () {
    	this.foo = function () {
      	return 'Foo from parent!';
      };
    }
  })
	.component('childComponent', {
    require: {
      parent: '^parentComponent'
    },
    controller: function () {
      this.$onInit = function () {
      	this.state = this.parent.foo();
      };
    },
    template: [
      '<div>',
        'Component! {{ $ctrl.state }}',
      '</div>'
    ].join('')
  });

document.addEventListener('DOMContentLoaded', function () {
	angular.bootstrap(document, ['app']);
});
<div>
    <parent-component>
      <child-component></child-component>
    </parent-component>
</div>