title: Bootstrap-ui datepicker : how of have an empty ng-model?
body: <p>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.</p>
  
  <p>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 :</p>
  
  <pre><code>$scope.invoice.Payment_Date = null
  </code></pre>
  
  <p>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.</p>
  
  <p>If I initialize the variable as such :</p>
  
  <pre><code>$scope.invoice.Payment_Date = new Date();
  </code></pre>
  
  <p>then when changing the datepicker date, the ng-model is updated as it should.</p>
  
  <p>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.</p>
  
  <p>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 ?</p>
  
  <p>Hope someone can help !</p>
  
  <p>Edit : here's the HTML code of the datepicker :</p>
  
  <pre><code>&lt;form name="formFacture" novalidate rc-submit="modifierFacture()"&gt;  
  &lt;div class="form-group"&gt;
      &lt;label&gt;Date de paiement : &lt;/label&gt;
          &lt;p class="input-group"&gt;
              &lt;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()" /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="openDatePaiement()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;div class="container text-center"&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Enregistrer&lt;/button&gt;
      &lt;div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')"&gt;Retour&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the JS code :</p>
  
  <pre><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
  }
  </code></pre>
  
  <p>After reviewing the code I found that :</p>
  
  <ol>
  <li>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.</li>
  <li>If I use the "clear" button inside the datepicker, the facture.Date_Paiement variable doesn't revert to null</li>
  <li><p>I've tried adding this line :</p>
  
  <p>$scope.Date_Paiement = null</p></li>
  </ol>
  
  <p>inside the openDatePaiement function, but in this case, the facture.Date_Paiement staus null at all times.</p>