Angular Bootstrap UI Datepicker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<div class="container" ng-app="demoApp" ng-controller="demoController">
  <form name="create">
  <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" close-text="Close" ng-click="OpenAvailableDate()"
                 my-date/>
                 <label >
                    enter a number
                </label>
                <input type="text" ng-keyup="getDueDate()" ng-model="daysFrom">
            </div>
        </div>
        
    </div>
    
<button class="btn btn-warning btn-create" type="button"  ng-disabled="create.$invalid">
		<span class="btn-label">Create</span>
	</button>
</form>

CSS

.row {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 10px;
    margin-bottom: 5px;
}

JavaScript

var demoApp = angular.module('demoApp', ["ui.bootstrap"]);

// create angular controller
demoApp.controller("demoController", ["$scope",
    function($scope) {
        var today = new Date();
        
        $scope.ExpireDate = new Date();
        $scope.dateFormat = 'yyyy-MM-dd';
        $scope.availableDateOptions = {
            formatYear: 'yy',
            startingDay: 1,
            minDate: today,
            maxDate: new Date(2030, 5, 22)
        };
     
        $scope.availableDatePopup = {
            opened: false
        };
       
       
        $scope.OpenAvailableDate = function() {
            $scope.availableDatePopup.opened = !$scope.availableDatePopup.opened;
        };
        
        $scope.getDueDate = function() {
        var  d = parseInt($scope.daysFrom);
        var fromDay;
        fromDay =  moment(new Date(),'yyyy-MM-dd');
        var newDate = fromDay.clone().add(d, 'days');
        $scope.AvailableDate =moment(new Date(newDate),'yyyy-MM-dd');
        
        console.log( 'due',$scope.AvailableDate)
        }
        
    }
]);
demoApp.directive('myDate', function() {
		return {
			restrict: 'EAC',
			require: '?ngModel',
			link: function(scope, element, attrs, ctrl) {

				if (!ctrl) { return; }
				ctrl.$formatters.push(function(value) {
					if (value) {
						return new Date(value);
					}
					return undefined;
				});
			}
		};
	});