Bootstrap-ui datepicker : how of have an empty ng-model?

Question

In an angular project, I have an bootstrap-ui datepicker which is used to provide info on the date when an invoice has been paid.

Initially, upon creating the invoice, as it has not been paid and so I should have an ng-model variable indicating null or something like that :

$scope.invoice.Payment_Date = null

The thing is, it appears that the datepicker needs to have a valid date object to work. When using everything this way, when I select a date in the datepicker to say my invoice has been paid, the datepicker indicates a correct date like Tuesday, February 15 2016, but the ng-model variable remains null.

If I initialize the variable as such :

$scope.invoice.Payment_Date = new Date();

then when changing the datepicker date, the ng-model is updated as it should.

The problem is, I may have to create/update the invoice without saying it has been paid, and doing so, I get a Payment_Date which has the value of the date said invoice has been created/updated.

Is there a way to leave this variable set to null or empty when the datepicker is left untouched and yet having it get the correct datepicker value when it's used ?

Hope someone can help !

Edit : here's the HTML code of the datepicker :

<form name="formFacture" novalidate rc-submit="modifierFacture()">  
<div class="form-group">
    <label>Date de paiement : </label>
        <p class="input-group">
            <input type="text" class="form-control" uib-datepicker-popup="dd MMMM yyyy" ng-model="facture.Date_Paiement" is-open="popupDatePaiement.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Fermer" clear-text="Effacer" current-text="Aujourd'hui" readonly="readonly" ng-click="openDatePaiement()" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="openDatePaiement()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
<div class="container text-center">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')">Retour</div>
</div>

</form>

Here's the JS code :

$scope.facture = {};
$scope.dateOptions = {
   startingDay: 1
 };
$scope.popupDatePaiement = {
   opened: false
};
var openDatePaiement = $scope.openDatePaiement = function() {
   $scope.popupDatePaiement.opened = true;
};

$scope.modifierFacture = function(){
   console.log($scope.facture);
   return
}

After reviewing the code I found that :

1. I can get a valid date with the datepicker ( there was a slight error with the ng-model ) but if I change the date twice, the facture.Date_Paiement variable stays with the 1st choice, the 2nd choice does not get forwarded to it.
2. If I use the "clear" button inside the datepicker, the facture.Date_Paiement variable doesn't revert to null

3. I've tried adding this line :

   $scope.Date_Paiement = null

inside the openDatePaiement function, but in this case, the facture.Date_Paiement staus null at all times.

Answer 1

Ok, after hours spent researching the whys of this question, I found an answer.

DO NOT rely on console.log(object) to tell you what is inside the object as it seems the function parsing the object to render it inside the console is bugged !

Instead, use console.log(JSON.stringify(object)) and you'll have the correct values.

My head still aches, what are we to do when such things are bugged ???