title: AngularJS Error: Cannot use 'in' operator to search for '$ctrl' in
body: <p>I have the <code>directory</code> component passing a function to the <code>question</code> component. The <code>question</code> component is to take an input, and then update the <code>directory</code> component with this input via the function. When the <code>question</code> component tries to access this function, there is the JS error: <code>angular.min.js:123 TypeError: Cannot use 'in' operator to search for '$ctrl' in Lee</code>. What am I doing incorrectly to trigger this error?</p>
  
  <p><a href="https://plnkr.co/edit/hXjhhJcCWPcavp8Z8BRa?p=preview" rel="noreferrer">https://plnkr.co/edit/hXjhhJcCWPcavp8Z8BRa?p=preview</a></p>
  
  <pre><code>let directoryTemplate = 
    '&lt;question on-click="$ctrl.updateLastName()"&gt;&lt;/question&gt;' +
    '&lt;br /&gt;' +
    'Full name: {{$ctrl.fullName}}';
  
  class directoryController {
    constructor() {
      this.fullName;
      this.firstName = 'Jack';
    }
    updateLastName(lastName) {
      this.fullName = `${this.firstName} ${lastName}`;
    }
  }
  
  
  let questionTemplate = 
    '&lt;input ng-model="$ctrl.input" /&gt;' +
    '&lt;button ng-click="$ctrl.onClick($ctrl.input)"&gt;Submit&lt;/button&gt;';
  
  class questionController {
    constructor() {
      this.input;
    }
  }
  
  
  angular
    .module('app', [])
    .component('directory', {
      template: directoryTemplate,
      controller: directoryController
    })
    .component('question', {
      template: questionTemplate,
      controller: questionController,
      bindings: {
        onClick: '&amp;'
      }
    });
  </code></pre>