title: Format Date in ng-Model in Angular Custom Directive for Date Picker
body: <p>I am a novice in Angular and need help regarding the Custom Directive.
  I have a date picker Directive where the user selects Date, Month and Year from a Drop Down which is then displayed in a textbox in the format : YYYY-MM-DD</p>
  
  <pre><code> $scope.$watch('model', function ( newDate ) {
          $scope.dateFields.day = new Date(newDate).getUTCDate();
          $scope.dateFields.month = new Date(newDate).getUTCMonth();
          $scope.dateFields.year = new Date(newDate).getUTCFullYear();
        });
  </code></pre>
  
  <p>The Drop Down is displayed using :</p>
  
  <p></p>
  
  <pre><code>&lt;select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"&gt;&lt;/select&gt;
  
  &lt;select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year"  ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>When all above Dropdowns are selected, the Input Textbox shows only the Year whic I want to show the complete date in the Format : YYYY-MM-DD</p>
  
  <p>The Code for that is :</p>
  
  <pre><code>&lt;input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields"&gt; 
  </code></pre>
  
  <p>In the above code there is <code>data-ng-model="dateFields.year"</code>. is there any method where I can customize this to show <code>dateFields.year-dateFields.month-dateFields.date</code></p>