title: How to format a date using ng-model?
body: <p>I have an input defined as</p>
  
  <pre><code>&lt;input class="datepicker" type="text" ng-model="clientForm.birthDate" /&gt;
  </code></pre>
  
  <p>Which is rigged up to be displayed elsewhere on the page:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;th&gt;Birth Date&lt;/th&gt;
      &lt;td&gt;{{client.birthDate|date:'mediumDate'}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>When the page loads the birth date is nicely formatted as something like <code>Dec 22, 2009</code>. However, when I look inside my <code>&lt;input&gt;</code> it's shown as <code>Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)</code> which I guess is how JS renders <code>Date</code> objects as strings.</p>
  
  <p>Firstly, how do I tell Angular to show the date in the <code>&lt;input&gt;</code> as something like <code>12/22/2009</code>? I can't seem to apply <code>|filters</code> inside the <code>ng-model</code> attribute.</p>
  
  <p>Secondly, as soon as I edit the date, even keeping it in it's original format, my other text (inside the <code>&lt;td&gt;</code>) doesn't seem to apply the <code>|date</code> filter anymore; it suddenly changes formats to match that of the input textbox. How do I get it to apply the <code>|date</code> filter every time the model changes?</p>
  
  <hr>
  
  <p>Related questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/q/14494026/65387">How do I get my directive to only fire on onchange?</a></li>
  <li><a href="https://stackoverflow.com/q/14494095/65387">How to access arguments in a directive?</a></li>
  </ul>