title: How to change the ui.bootstrap.datepicker popup date selected programmatically?
body: <p>I have a clear button that when pressed needs to reset the <code>input</code> value to the default date (today) <em>as well as</em> the button in the datepicker popup. The issue I'm having is the date watermark value in the <code>input</code> text control does successfully get set to the default date upon pressing the 'clear' button. </p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;p class="input-group"&gt;
      &lt;input type="text" class="form-control" placeholder="{{startPlaceHolder}}" datepicker-popup="{{format}}" ng-model="dtPopup" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
  
       &lt;span class="input-group-btn"&gt;
         &lt;button type="button" class="btn btn-default" ng-click="openStart($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
       &lt;/span&gt;
  &lt;/p&gt;
  &lt;button class="btn btn-danger" type="button" ng-click="clearSearchData()"&gt;&lt;i class=" glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>AngularJS Controller:</p>
  
  <pre><code>$scope.clearSearchData = function () {
      $scope.filterDate.dtPopup= null;
      $scope.startPlaceHolder = $.datepicker.formatDate("mm-dd-yy", startdate);
  }
  
  $scope.startPlaceHolder = $.datepicker.formatDate("mm-dd-yy", startdate);
  </code></pre>
  
  <p>However, when opening the calendar again the button is still focused on the <strong>previously</strong> selected date. I can't seem to get at the correct property to programmatically reset that popup calendar date selected. How do I programmatically change the popup calendar date button value selected?</p>