title: Share code between controllers and directives
body: <p>In my angular app I have two input fields on most views that have a start and end date. These are updated by the user and the result is stored in the URL to maintain state or allow people to share links and start exactly where they left off. </p>
  
  <p>I am trying to extract this into a directive that updates the url on every change to one of those two fields. Additionally I want each controller to be able to access the dates as they are used as query parameters for other endpoints.</p>
  
  <p>Here is my directive:</p>
  
  <pre><code>angular
  .module('dateDemo')
  .directive('DateFields',['$location', DateFields]);
  
  function DateFields($location) {
  
  return {
    templateUrl: 'shared/partials/_dateFields.html',
    scope: false,
    bindToController: {
      start_date  :   '=',
      end_date    :   '='
    },
    controller: DateFieldCtrl,
    controllerAs: 'dateCtrl'
  };
  
  function DateFieldCtrl() {
      var dateCtrl          = this;
      dateCtrl.refreshUrl   = refreshUrl;
  
      function refreshUrl() {
          var searchString    = '';
          searchString += '&amp;start_dt=' + moment(dateCtrl.start_dt).format('YYYY-MM-DD');
          searchString += '&amp;end_dt=' + moment(dateCtrl.end_dt).format('YYYY-MM-DD');
          $location.search(searchString);
      }
  }
  }
  </code></pre>
  
  <p>My Partial:</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
  &lt;label&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; &lt;b&gt;Date&lt;/b&gt;&lt;/label&gt;
  &lt;div class="form-group"&gt;
      &lt;input type="date" class="form-control input-sm" ng-model="vm.data.start_dt" ng-change="refreshURL()"&gt;
      &lt;p class="text-right"&gt;&lt;small class="help-block"&gt;From Date&lt;/small&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;
  &lt;label&gt;&amp;nbsp;&lt;/label&gt;
  &lt;div class="form-group"&gt;
      &lt;input type="date" class="form-control input-sm" ng-model="vm.data.end_dt" ng-change="refreshURL()"&gt;
      &lt;p class="text-right"&gt;&lt;small class="help-block"&gt;To Date&lt;/small&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I'm attempting to do is bind the <code>vm.data.end_dt</code> and <code>vm.data.start_dt</code> variables so that the directive manages the updating, while the controllers have access to these values. I can't get the function in my directive to trigger, and I've tried different combinations of which variable goes in the partial to no avail. What am I doing wrong?</p>