Cannot create from/to date range using bootstrap ui - angularjs

Question

I am using Angular UI Bootstrap components in my application.
There are two dates in it. Available Date and ExpireDate. I want the ExpireDate to be always greater than AvailableDate.
var expireMinDate = new Date();
$scope.OpenExpireDate = function() {
$scope.expireDatePopup.opened = true;
var newMinDate = $scope.availableDateOptions.minDate;
$scope.expireDateOptions.minDate = expireMinDate.setDate(newMinDate.getDate() + 1);
};
I tried this code. This is not working. The ExpireDate is not disabled the way I intend. I am not getting the code to disable all the other days. What could be wrong?
Update: Now I am watching the AvailableDate and changing the minDate accordingly.
$scope.$watch('AvailableDate', function() {
var newMinParts = $scope.AvailableDate.toString().split("-");
$scope.expireDateOptions.minDate = new Date(newMinParts[0], newMinParts[1]-1, newMinParts[2]);
});
Updated Fiddle: https://jsfiddle.net/codeandcloud/cpu4euoj/4/
The idea is to update the ExpireDate minDate setting to reflect the change in AvailableDate. Now the minDate setting has completely vanished.

Answer 1

For html part
<div class="container" ng-app="demoApp" ng-controller="demoController">
<div id="demoForm" name="demoForm" ng-form="demoForm" novalidate>
<div class="col-md-4">
<label class="control-label">Available Date</label>
<div class="input-form">
<input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="AvailableDate" name="availabledate" is-open="availableDatePopup.opened" datepicker-options="availableDateOptions" ng-required="true" data-ng-change="captureChange(AvailableDate)" close-text="Close" ng-click="OpenAvailableDate()"
placeholder="Available Date" />
<label ng-show="showMessages && addJobForm.availabledate.$invalid" class="text-danger">
Available Date is required.
</label>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Expire Date</label>
<div class="input-form">
<input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="ExpireDate" name="expiredate" is-open="expireDatePopup.opened" datepicker-options="expireDateOptions" ng-required="true" close-text="Close" ng-click="OpenExpireDate()"
placeholder="Expire Date" />
<label ng-show="showMessages && addJobForm.expiredate.$invalid" class="text-danger">
Expire Date is required.
</label>
</div>
</div>
</div>
For JAvascript Part
var demoApp = angular.module('demoApp', ["ui.bootstrap"]);
demoApp.controller("demoController", ["$scope",
function($scope) {
var today = new Date();
$scope.dateFormat = 'yyyy-MM-dd';
$scope.availableDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: today,
maxDate: new Date(2030, 5, 22)
};
$scope.expireDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: today,
maxDate: new Date(2030, 5, 22)
};
$scope.availableDatePopup = {
opened: false
};
$scope.expireDatePopup = {
opened: false
};
$scope.OpenAvailableDate = function() {
$scope.availableDatePopup.opened = true;
};
$scope.captureChange = function(val){
var expDate = angular.copy(val);
expDate.setDate(expDate.getDate()+1);
$scope.ExpireDate = expDate;
}
var expireMinDate = new Date();
$scope.OpenExpireDate = function() {
$scope.expireDatePopup.opened = true;
var newMinDate = $scope.availableDateOptions.minDate;
if($scope.AvailableDate != undefined){
var ddnew = angular.copy($scope.AvailableDate);
ddnew.setDate(ddnew.getDate()+1);
$scope.expireDateOptions.minDate = ddnew;
}
else{
$scope.expireDateOptions.minDate = today;
}
};
}]);