title: Bind and fetch dropdown list value in typescript and Angular2
body: <p>This question was asked many times and couldn't help me with my problem. Not sure whats wrong with the approach and hope some fresh "eyes"</p>
  
  <p>Here is my dropdownlist binding in HTML: I am binding programName which is a string to both value and text properties.</p>
  
  <pre><code>&lt;select [ngModel]="selectedObject"&gt;
     &lt;option *ngFor="let p of programs" value= {{p.programName}}&gt;
           {{p.programName}}
     &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In my .ts file, here is the what i am doing to bind the default value to the "select"</p>
  
  <pre><code> loadData(pList: IProgram[]) {
      this.programs = pList;
      if (this.programs.length &gt; 0) {
          this.selectedObject = this.programs[0];
      }
  }
  </code></pre>
  
  <p>The data is binding to "select"
  properly, </p>
  
  <ul>
  <li>but the default value is showing as empty text, where i need to click and select an value.</li>
  <li>Another issue is when i change the dropdown value from A to B, the "selectedObject" value is always giving me "A" instead of "B". As it is [ngModel], two way binding would take care. But, its not happening as i might be missing something here.</li>
  </ul>
  
  <p>Can someone help whats the problem with this approach?</p>