如何将控制器功能变量传递给Datepicker指令？

Question

I am new to Angularjs. I have put 2 Datepickers. I need that When I select date from first datepicker then the smaller dates from that date should be disabled in second Datepicker. I am unable to set "minDate" for second Datepicker directive.

Below is my code :

HTML Code :

<div ng-controller='TestController'>

  <label>From Date :</label>
  <input type="text" id="1" datepicker="" ng-init="variable=''"
         ng-model="startDate" ng-change="test()" />

  <label>To Date :</label>
  <input type="text" id="2" callFuc="test()" datepicker1=""
         ng-model="endDate" />
</div>

Js Code:

app.controller('TestController', function($scope, $window) {
  $scope.test = function() {
    $scope.variable = $scope.startDate;
    $window.alert("From date is" + $scope.variable);
  };
});

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#1').datepicker({
        minDate: 0,
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#2').datepicker({
        minDate: scope.test(),
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

I am able to disable past dates in first Datepicker using minDate : "0" .
But I am unable to set minDate properly for the second Datepicker. I am not able to fetch selected date from the First Datepicker and pass it to "datepicker1" directive. Any help or suggestion will be appreciated.

---

Update

I have updated code. Kindly review it.

https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview

Answer 1

The datepicker directive needs to watch for changes and update minDate as needed:

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      scope.$watch(attr.minDate, function(value) {    
          el.datepicker({
            minDate: value,
            onSelect: function(dateText) {
              scope.$apply(function() {
                ngModel.$setViewValue(dateText);
              });
            }
          });
      });
    }
  };
});

Usage:

  <label>To Date :</label>
  <input type="text" min-date="variable" datepicker1
         ng-model="endDate" />