Angular 1.5: Directive using link function won't update the parent scope through the bindings

Question

I'm creating a directive to wrap the DateRangePicker. I'm using the link function to instantiate the daterangepicker and I attach a callback method on the directive's controller to update the scope variables. Problem is it doesn't seem to update those variables. I've made a PLNKR to demonstrate the issue I'm having. You can see that startDate and endDate update fine using the buttons. And in the console debug section you can see that the callback method is being called. It just doesn't update the parent scope. And you can tell that it does bind with one-way because the label shows up as Schedule.

http://plnkr.co/edit/s8sB95YwXSD6oTo6b1MI?p=preview

var app = angular.module('demo', ['angularMoment']);

app.controller('Home', function ($scope) {
  $scope.startDate = moment();
  $scope.endDate = moment();
  $scope.updateStart = function () {
    $scope.startDate = moment();
  };
  $scope.updateEnd = function () {
    $scope.endDate = moment();
  };
});

app.directive('dateInput', function () {
  return {
    resolve: 'E',
    templateUrl: 'dateInput.html',
    scope: {
      dateStart: '=',
      dateEnd: '=',
      label: '@'
    },
    controller: function ($scope) {
      var self = this;
      self.update = function (start, end, label) {
        console.debug('DirectiveCtrl.update: ' + start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));
        $scope.dateStart = start;
        $scope.dateEnd = end;
      };
    },
    link: function (scope, element, attrs, controller) {
      element.children('div').children('input').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        locale: {
          format: 'MM/DD/YYYY h:mm A'
        }
      }, controller.update);
    }
  }
});

HTML:

<div ng-controller="Home">
  <p>
    Start Date: {{startDate | amParse: 'MM-DD-YYYY'}}
    <br />
    End Date: {{endDate | amParse: 'MM-DD-YYYY' }}
  </p>
  <date-input date-start="startDate" date-end="endDate" label="Schedule"></date-input>
  <button type="button" ng-click="updateStart()">Update Start</button>
  <button type="button" ng-click="updateEnd()">Update End</button>
</div>

Answer 1

You need to tell angular the model has changed so call $scope.$apply() in your update function after you're done updating the vars.