title: How to add ng-model functionality to a component
body: <h2>Angular ng-change on ng-model passed into child directive</h2>
  <p>Basically, I want to be able to pass in ng-model from a parent directive  to a child directive. I could just in a 2-way binded value, but then I wouldn't be able to use a ng-change in the parent directive on the child element. I could also use ng-click, but this wouldn't work with a non-clicking change (such as a text area instead of a checkbox). So I'm wondering if there's a way to allow a custom directives to have a ng-model/ng-change pair similar to how inputs, buttons, text areas and other html elements can. I want to avoid using emits, ons, watches, passing callbacks, etc. I just want to be able to do [input type=&quot;checkbox&quot; ng-model=&quot;ngModel&quot;] on a custom directive instead of input.</p>
  <p><strong>Parent Template</strong></p>
  <pre><code>&lt;child ng-model=&quot;x&quot; ng-change=&quot;x()&quot;&gt;&lt;/toggle&gt;
  </code></pre>
  <p><strong>Parent Directive</strong></p>
  <pre><code>$scope.x = function() {console.log('hi')};
  </code></pre>
  <p><strong>Child Template</strong></p>
  <pre><code>&lt;div&gt;
       &lt;input type=&quot;checkbox&quot; ng-model=&quot;ngModel&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Child Directive ??</strong></p>
  <pre><code>$scope.ngModel = $element.controller('ngModel'); 
  </code></pre>
  <p>My angular version is 1.4.8 btw.</p>
  <p>Thanks :)</p>