title: can not populate boostrap calendar using angularjs
body: <p>I'm using the following libraries,</p>
  
  <pre><code>Angularjs
  boostrap
  datepair https://jonthornton.github.io/Datepair.js/
  jQuery timepicker
  </code></pre>
  
  <p>I'm building a leave request application where employees can schedule time off by selecting start date, start time, end time, end date. I'm using Jon Thornton's datepair to auto populate the end date and end time. I've been able to successfully get this to all work. </p>
  
  <p>I'm experiencing an issue populating the calendar field with the scope when the field value is preexisting in the database. </p>
  
  <p>Code example. </p>
  
  <pre><code>  &lt;body ng-app="app"&gt;
      &lt;div ng-controller="AppCtrl"&gt;
        &lt;div id="requestForm" xp-datepair&gt;
                  &lt;input type="text" class="date start" ng-model="startDate" xp-datepicker required /&gt; 
                  &lt;label&gt;Start Time&lt;/label&gt; 
                  &lt;input type="text" class="time start" ng-model="startTime" xp-timepicker required /&gt; 
                  &lt;label&gt;End Time&lt;/label&gt;
                  &lt;input type="text" class="time end" ng-model="endTime" xp-timepicker required /&gt; 
                  &lt;label&gt;End Date&lt;/label&gt;
                  &lt;input type="text" class="date end" ng-model="endDate" xp-datepicker required /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>js </p>
  
  <pre><code>angular
    .module('xp-timepicker', [])
    .directive('xpTimepicker', timepicker)
    .directive('xpDatepicker', datepicker)
    .directive('xpDatepair', datepair);
  
  function datepair() {   
      return {
        restrict: 'A',
        link: function (scope, element, attrs) { 
          new Datepair(element[0]);
        }
      }; 
  }
  
  function timepicker() {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.timepicker({
          showDuration: true,
          timeFormat: 'g:ia'
        });
      }
    };
  }
  
  function datepicker() {
      return {
          restrict : 'A',
          link : function(scope, element, attrs) {
              element.datepicker({
                  'format' : 'MM/dd/yyyy',
                  'autoclose' : true
              });
          }
      };
  }
  
  angular
    .module('app', ['xp-timepicker'])
    .controller('AppCtrl', function ($scope) {
      $scope.startDate = '01/12/2016';
      $scope.endDate = '01/12/2016';
  
      $scope.startTime = '7:00pm';
      $scope.endTime = '8:00pm';
    });
  </code></pre>
  
  <p>I should see the calendar field populated with 01/12/2016, but it appears to be blank. The time however appears to be working perfectly. Interestingly if I populate the input value rather than ng-model, it appears to work. </p>
  
  <p>plunker <a href="https://plnkr.co/edit/CoZjcFlFGR4ZWoPLPFPc?p=preview" rel="nofollow">example</a>. </p>