title: AngularJS Form With Dates in Different Time Zone Than the Browser's Time Zone
body: <p>I've got a form for booking appointments:</p>
  
  <pre><code>&lt;form&gt;
    &lt;div&gt;
      &lt;label&gt;Date:&lt;/label&gt;
      &lt;input type="date" ng-model="scheduled" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;Time:&lt;/label&gt;
      &lt;input type="time" ng-model="scheduled" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      Summary: {{scheduled}}
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This form appears to be automatically scoped to the browser's time zone. For example, if I set the date and time to <strong>2016-03-03</strong> and <strong>12:00 AM</strong> respectively the appointment's scheduled is set to <strong>2016-03-03T08:00:00.000Z</strong> (when the system clock is in PST).</p>
  
  <p>I'm now interested in modifying the form to allow for setting an arbitrary time zone (based on the office - but for simplicity from a dropdown will work):</p>
  
  <pre><code>&lt;form&gt;
    &lt;div&gt;
      &lt;label&gt;TZ:&lt;/label&gt;
      &lt;select ng-model="tz"&gt;
        &lt;option value="pst"&gt;PST&lt;/option&gt;
        &lt;option value="est"&gt;EST&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    ...
    &lt;div&gt;
      Summary: {{scheduled | date : 'medium' : tz}} {{tz}}
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This changes the display to be in the selected time zone but does not change the input. How can I change the time zone of the form based on the option?</p>