title: Async Pipe used with Select/Options & ngModel/ngModelChange
body: <h1>Problem Description</h1>
  <p>I am trying to make a <code>select</code>/<code>option</code>-based dropdown work with an observable fields using <code>asyncPipe</code> and <code>[ngModel]</code>/<code>(ngModelChange)</code>. Something is very wrong with my code because in run time the console outputs an <code>[object Object]</code> (please see image below).</p>
  <p>What confuses me is that if I use <code>[value]=&quot;payPeriod.id&quot;</code>, it works fine and the numeric <code>id</code> is successfully received on <code>setSelectedPayPeriod(...)</code> side.</p>
  <p><strong>component.html</strong></p>
  <pre><code>  &lt;select [ngModel]=&quot;selectedPayPeriod | json&quot; (ngModelChange)=&quot;setSelectedPayPeriod($event)&quot;&gt;
      &lt;option *ngFor=&quot;let payPeriod of (payPeriodList | async)&quot; [value]=&quot;payPeriod&quot;&gt;{{ payPeriod.endDate }}&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  <p><strong>component.ts</strong></p>
  <pre><code>get payPeriodList(): Observable&lt;PayPeriod[]&gt; {
    return this._contextService.payPeriodList;
  }
  
  get selectedPayPeriod(): Observable&lt;PayPeriod&gt; {
    return this._contextService.selectedPayPeriod;
  }
  
  setSelectedPayPeriod(newValue: PayPeriod): void {
    console.warn(newValue);
    this._contextService.setSelectedPayPeriod(newValue);
  }
  </code></pre>
  <h1>Console output</h1>
  <p><a href="https://i.stack.imgur.com/VKih4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKih4.png" alt="enter image description here" /></a></p>
  <h1>Apology</h1>
  <p>Sorry, I'm not very familiar with plunker and can't quickly find an Angular 2 template I can work off.</p>
  <h1>UPD. Accepted Solution -- by AJT_82</h1>
  <ol>
  <li>Use <code>[ngValue]</code> instead of <code>[value]</code> on <code>option</code> element.</li>
  <li>Use <code>[ngModel]=&quot;selectedPayPeriod | async&quot;</code> instead of <code>[ngModel]=&quot;selectedPayPeriod | json&quot;</code> on <code>select</code> element.</li>
  </ol>
  <hr />
  <pre><code>  &lt;select [ngModel]=&quot;selectedPayPeriod | async&quot; (ngModelChange)=&quot;setSelectedPayPeriod($event)&quot;&gt;
      &lt;option *ngFor=&quot;let payPeriod of (payPeriodList | async)&quot; [ngValue]=&quot;payPeriod&quot;&gt;{{ payPeriod.endDate }}&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>