title: Angular JqueryUI datepicker directive model change
body: <p>I have an Angular directive that wraps JqueryUI datepicker:</p>
  
  <pre><code>angular.module('uiControls').directive('datePicker', [function () {
      return {
          restrict: 'A',
          require: "ngModel",
          link: function(scope, elem, attrs, ngModelCtrl) {
              var options = {
                  dateFormat: "mm/dd/yy",
                  inline: true,
                  showOtherMonths: true,
                  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                  onSelect: function (dateText) {
                      scope.$apply(function () {
                          ngModelCtrl.$setViewValue(dateText);
                      });
                  }
              };
  
              elem.datepicker(options);
          }
      };
  } ]);
  </code></pre>
  
  <p>And I use it like that:</p>
  
  <pre><code>&lt;div date-picker ng-model="currentFilter.filter"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My question is:</p>
  
  <p>The datepicker is opened when the current date is selected by default, but the model on the scope is null. Only when the user really clicks a date, then the onSelect event is fired, and now the model has a value.
  How can I initialize the model according to the selected date in the datepicker?
  I tried to add a watch in the directive, and change the model from outside, but it didn't work.</p>
  
  <p>Thanks.</p>