title: bootstrap angular datepicker set ng-model $invalid not change
body: <p>I am Useing Bootstrap angular datepicker in a form to update my model 'User'.</p>
  
  <p>I set this datepicker 'require' property is true. 
  UpdateUser.html:</p>
  
  <pre><code>&lt;form name="userForm" novalidate&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Birthday&lt;/label&gt;
          &lt;p class="input-group"&gt;
              &lt;input type="text" name="birthday" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="user.birthday" is-open="opened" datepicker-options="dateOptions" ng-required="true" /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default"
                  ng-click="openDate($event)"&gt;
                  &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/span&gt;
      &lt;/p&gt;
      &lt;span&gt;{{userForm.birthday.$invalid}}&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid"&gt;Update&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>UserCtrl.js:</p>
  
  <pre><code>mainApp.controller("detailCtrl", function($scope, $http, $routeParams, DemoService) {        
    $scope.user = DemoService.get({userId : $routeParams.userId});
    $scope.openDate = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.opened = true;
    };
    $scope.dateOptions = {
      formatYear: 'yy',
      startingDay: 1
    };
  });
  </code></pre>
  
  <p>So my question is: 
  Why {{userForm.birthday.$invalid}} is true when I first set the 'user.birthday' to the datepicker?</p>
  
  <p>Plunker:</p>
  
  <p><a href="http://plnkr.co/edit/DkGEVJ?p=preview" rel="nofollow">http://plnkr.co/edit/DkGEVJ?p=preview</a></p>