title: Default select option in angular2 not working
body: <p>An application developed in <code>angular2</code> on which I have different food categories, If I pick some category (e.g: salads..) and in that page I want to add a specific food a modal popped up with some fields to add infos about the food, among those fields there is a <code>dropdown-list</code> with different categories, what I want is that the category that i'm already on it (was picked) would appear as selected by default.</p>
  
  <p>Here is a <code>category</code> page:</p>
  
  <p><a href="https://i.stack.imgur.com/e5Oiv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e5Oiv.png" alt="enter image description here"></a></p>
  
  <p>clicking on the <code>button</code> on the <code>top-right</code> will pop that modal:</p>
  
  <p><a href="https://i.stack.imgur.com/qWCoN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qWCoN.png" alt="enter image description here"></a></p>
  
  <p>I want that that category will be selected by default.</p>
  
  <p>Here what I've done but did not work:</p>
  
  <p><code>Add item modal</code> HTML part :</p>
  
  <pre><code>&lt;fieldset class="form-group"&gt;
      &lt;label for="category"&gt;{{'category' | translate}}&lt;/label&gt;
      &lt;select
        id="category"
        class="form-control"
        formControlName="select"
        [ngModel]="currentCategory"
      &gt;
        &lt;option [value]="category.id" *ngFor="let category of categories"&gt;
          {{category.name}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/fieldset&gt;
  </code></pre>
  
  <p>And here is its <code>TS</code> part:</p>
  
  <pre><code>    export class AddItemModalComponent implements AfterContentInit {
    // @Input() currentCategory: any;
    @Input() isAdvanced:      boolean;
  
    public currentCategory:       any;
    public  currentCurrency:      string;
    public  itemForm:             FormGroup;
    public  categories:           Category[];
    public  deactivated:          boolean = true;
  
    private pictureData:          any;
    private categoryId:           string;
    private pictureUploaded:      boolean;
    private isCategoriesLastPage: boolean;
    private pageNumber:           number = 0;
  
  
    constructor(
      private router:          UIRouter,
      private formBuilder:     FormBuilder,
      private pageService:     PageService,
      private itemService:     ItemService,
      public  activeModal:     NgbActiveModal,
      private uploadService:   LcUploadService,
      private categoryService: CategoryService
    ) {
      this.categoryId      = this.router.stateService.params['category'];
      this.categoryService.getCategory(this.categoryId).subscribe(
        data =&gt; {
          this.currentCategory = data.name;
          console.log(this.currentCategory)
        },
        error =&gt; console.log('Could not load category.')
      );
    }
  
    ngAfterContentInit() {
      this.itemForm        = this.formBuilder.group({
        file:               new FormControl(''),
        item_type:          new FormControl(''),
        internal_reference: new FormControl(''),
        name:               new FormControl('', Validators.required),
        price:              new FormControl('', Validators.required),
        select:             new FormControl('', Validators.required),
        tax:                new FormControl('', Validators.compose([
          Validators.required,
          Validators.pattern(REGEX.ONLY_POSITIVE)
        ])),
        description:        new FormControl('', Validators.compose([
          Validators.minLength(7),
          Validators.maxLength(512)
        ]))
      });
  
    AddItem(): void {
      let newItem, formValue;
      if (this.itemForm.dirty &amp;&amp; this.itemForm.valid) {
        formValue = this.itemForm.value;
        newItem = {
          tax:         formValue.tax,
          name:        formValue.name,
          price:       formValue.price,
          category_id: formValue.select,
          item_type:   formValue.item_type,
          description: formValue.description,
          picture:     this.pictureData.public_id
        };
        this.itemService.addItem(newItem).subscribe(
          (data: any): void =&gt; this.activeModal.close(data),
          (error: Response): void =&gt; console.log('Could not add item', error.json())
        );
      }
    }
  }
  </code></pre>
  
  <p>It brings it in console but I do not know why it doesnt affect it to the <code>dropdown-list</code></p>
  
  <p>And here is the <code>TS</code> function of the opening modal button :</p>
  
  <pre><code>openAddItemDialog(): void {
      const modalRef: NgbModalRef           = this.modalService.open(
        AddItemModalComponent,
        {size: 'lg'}
      );
      modalRef.componentInstance.category   = this.breadcrumb;
      modalRef.componentInstance.isAdvanced = this.page.advanced;
      modalRef.result.then(
        (result: any): any =&gt; {
          if (this.categoryId === result.category.id) {
            this.items.unshift(result);
          }
        },
        (reason: any): void =&gt; console.log('Rejected!')
      );
    }
  </code></pre>
  
  <p>Any help?</p>