Inter-controller communication between date picker components - angularjs

Question

I would like to link two date picker components in AngularJS. Basically, I use two input fields to select a date range. As soon as the user selects a start date, the date picker for the end date should be limited and only allow selections after the start date.
However, each date picker is defined by its own controller and I suppose, that they do not share their models due to different scopes.
This is a simplified example:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1"></div>
</div>
</div>
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2"></div>
</div>
</div>
How can I set the options2.minDate property in the first controller, so that the second controller can read it properly? Is there any simple way to do that without introducing too much overhead?

Answer 1

Instantiate the controller only once:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1">
</div>
</div>
̶<̶/̶d̶i̶v̶>̶
̶<̶d̶i̶v̶ ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶D̶a̶t̶e̶p̶i̶c̶k̶e̶r̶D̶e̶m̶o̶C̶t̶r̶l̶"̶>̶
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2">
</div>
</div>
</div>
Then the scope will be shared.