title: AngularJS with Twitter Bootstrap DatePicker does not close after clicking outside
body: <p>I'm working on a site built with Twitter Bootstrap and AngularJS.  The calendar input field pops up a calendar, which is using datepicker.  Here's the code:</p>
  
  <pre><code>    &lt;div class="control-group {{errors.start_date.class}}"&gt;
        &lt;label class="control-label"&gt;Start Date&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy'});$('#start_date').datepicker('show');" required&gt;
           &lt;span class="help-block" data-ng-show="errors.start_date"&gt;{{errors.start_date.message}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>After I select a date, I click on an area outside of the calendar pop-up, but the pop-up will not close.  I tried adding in "autoclose:'true'", as you can see in the code below, but the pop-up still will not close.</p>
  
  <pre><code>    &lt;div class="control-group {{errors.start_date.class}}"&gt;
        &lt;label class="control-label"&gt;Start Date&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy','autoclose':true});$('#start_date').datepicker('show');" required&gt;
           &lt;span class="help-block" data-ng-show="errors.start_date"&gt;{{errors.start_date.message}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Does anybody have any idea on how to fix this?  Actually, it would be great if the calendar pop-up will close after I click on a date as well.</p>
  
  <p>Update on 2012-12-03: Previously, I had added jquery-ui-1.9.2.custom.min.js and this code to my controller:</p>
  
  <pre><code>$(".modal").draggable();
  </code></pre>
  
  <p>That is what disabled me from closing the calendar pop-up when clicking outside of it.  When I removed them, I am able to close the calendar.  However, I like to be able to make the modal windows draggable and close the calendar.  Is there a way to do both?  Also, I am still not able to close the calendar when I click on a date.  Does anybody have any suggestions?</p>