Replace Angular 1.x two-way binding with one-way binding

one-way-binding.js

/*
  Using one-way data bindings may offer an easy way to make sure such reassignments don't happen by accident. 
  If the component indeed does reassign the value on purpose, an explicit output binding should be used instead 
  of piggybacking on the two-way input.
  
  - Replace a two-way '=' binding on the directive configuration with an expression binding '&'.
  - Change all accesses to the binding inside the component to function calls.
  
  http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
  
  Component is used like this:
  
  <search-field
    search-term="mainCtrl.searchTerm"
    on-search-term-change="mainCtrl.setSearchTerm(newSearchTerm)">
  </search-field>
*/

module.directive('searchField', function() {
  return {
    scope: {},
    controller() {
       this.searchTerm = this.inputSearchTerm();
       this.onChange = () => {
          this.onSearchTermChange({newSearchTerm: this.searchTerm});
       };
    },
    controllerAs: 'ctrl',
    bindToController: {
      inputSearchTerm: '&',
      onSearchTermChange: '&'
    },
    templateUrl: `<input type="search"
       ng-model="ctrl.searchTerm"
       ng-change="ctrl.onChange()"/>`
  };
});

two-way-binding.js

/* 
  Like other kinds of state mutation, two-way bindings may make it unclear when and how things change in your application.
  
  Traditional component with two-way binding and is used like this:
  
  <search-field search-term="mainCtrl.searchTerm"></search-field>
*/

module.directive('searchField', function() {
  return {
    scope: {},
    controller() {
      // controller does not do anything
    },
    controllerAs: 'ctrl',
    bindToController: {
      searchTerm: '='
    },
    templateUrl: `<input type="search" ng-model="ctrl.searchTerm"/>`
  };
});