uib-datepicker : minDate doesn't seem to work - angularjs

Question

I don't know how to make the minDate property of my uib-datepicker work.
Here is what I have done:
<div class="form-group">
<div class="col-md-6">
<label class="col-md-4 control-label" for="field_dateDebut">Date Début</label>
<div class="col-md-5">
<div class="input-group">
<input id="field_dateDebut" type="text" class="form-control" name="dateDebut" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateDebut" is-open="vm.datePickerOpenStatus.dateDebut"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateDebut')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<label class="col-md-4 control-label" for="field_dateFinPrevisionnelle">Date Fin Prévisionnelle</label>
<div class="col-md-5">
<div class="input-group">
<input id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateFinPrevisionnelle" is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle" minDate = "vm.mission.dateDebut"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateFinPrevisionnelle')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
When I click on the first date, I want to disable all the dates previous to this date in the second datepicker.
If anyone has any idea...
Thank you.

Answer 1

As jmoreno pointed out, minDate is a property of an object and that object you need to pass through datepicker-options attribute in the element.
vm.dateOptions2 = {
minDate: new Date()
};
<input id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle"
ng-model="vm.mission.dateFinPrevisionnelle"
uib-datepicker-popup="{{dateformat}}"
datepicker-options="vm.dateOptions2"
is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle"/>
This is the basic. Now as you want to set the second datepicker's minDate to the first datepicker's selected date, you can use ng-change of the first datepicker element to change the minDate in vm.dateOptions2 object of the second datepicker.
<input id="field_dateDebut" type="text" class="form-control" name="dateDebut"
ng-model="vm.mission.dateDebut"
uib-datepicker-popup="{{dateformat}}"
ng-change="vm.setSecDatepickerMinDate()"
is-open="vm.datePickerOpenStatus.dateDebut" />
vm.setSecDatepickerMinDate = function() {
// to change the minDate of the second datepicker
vm.dateOptions2.minDate = vm.mission.dateDebut;
// updating the current vm.mission.dateFinPrevisionnelle date to vm.mission.dateDebut.
// I don't want any previous date keep setting in vm.mission.dateFinPrevisionnelle
vm.mission.dateFinPrevisionnelle = angular.copy(vm.mission.dateDebut);
}
This plunker will give you more clear idea.

Answer 2

As you can see on docs (https://angular-ui.github.io/bootstrap/#/datepicker) minDate is a property of a config Javascript object passed in datepicker-options to datepicker directive.