title: Material select box not showing binded value with ngModel - Angular2
body: <p>I'm using a material dialog component with some material input box/select box inside.</p>
  
  <p><strong>Here's the problem:</strong></p>
  
  <p>When the dialog opens, it receives from caller component a model that is copied inside a dialogLocalModel , binded to the html with two-way-binding.
  The bindings works great except for the last one.
  The difference here is that we are using ngModel on an object-type that stay inside our model.</p>
  
  <p><strong>Can someone explain me why</strong>, when i enter the dialog, i can see the first and second inputs well populated from the binding, but the third one still be blank, even if besides it have stored an information (that is an object.)</p>
  
  <p>I don't know if i've explained clearly my problem. Ask me anything if you doubt of something.
  I'll leave some comment in the following code for simplicity.</p>
  
  <p><strong><em>Here's the core part of the code:</em></strong></p>
  
  <p><strong>COMPONENT THAT CALLS THE DIALOG</strong></p>
  
  <pre><code> [...]
           public editAsset(model){ //this method open the dialog
  
              let dialogRef = this.dialog.open(AssetsDialogComponent, &lt;MatDialogConfig&gt;{
                  width: '80%',
                  data: {
                      mode : "edit",
                      /*
                      passing the data model (with this shape)
                      model = {index:string ,denomination: string,category :object }
                      */
                      assetModel : model 
                  }
              });
  
              //other part that work after closing of the dialog
          }
  </code></pre>
  
  <p><strong>DIALOG COMPONENT CALLED</strong></p>
  
  <pre><code>export class AssetsDialogComponent implements OnInit {
  
  public localAssetModel = {
      id : null,
      index: '',
      denomination: '',
      category: &lt;CatAssets&gt; null,
  };
  
  public catAssetList: CatAssets[];
  
  constructor(private assetsService: AssetsService,
              private catService: CategorieService,
              public dialogRef: MatDialogRef&lt;AssetsDialogComponent&gt;,
              @Inject(MAT_DIALOG_DATA) public data: any) {
  }
  
  ngOnInit() {
      this
          .catService
          .getCategories(CategoryTypes.Assets)
          .then(res =&gt; {
              this.catAssetList = res;
          })
          .catch(error =&gt; AppHTTPService.handleErrorPromise(error));
  
      this.initLocalModel(this.data.mode);
  }
  
  private initLocalModel(mode) {
  
      if(mode == "edit"){
          this.localAssetModel.id = this.data.assetModel.id;
          this.localAssetModel.index = this.data.assetModel.index;
          this.localAssetModel.denomination = this.data.assetModel.denomination;
          this.localAssetModel.category = this.data.assetModel.category;
  
      }
  </code></pre>
  
  <p><strong>HTML OF DIALOG BINDED TO TS LOGICS</strong></p>
  
  <pre><code>&lt;div class="col-lg-4"&gt;
              &lt;fieldset class="form-group"&gt;
                  &lt;mat-form-field&gt;
                      &lt;mat-select
                          placeholder="Categoria Asset"
                          [(ngModel)]="localAssetModel.category"
                          name="category"
                          required
                      &gt;
                          &lt;mat-option *ngFor="let category of catAssetList" [value]="category" &gt;
                              {{category.categoryId}}
                          &lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
  </code></pre>