Angular2 ngFor select doesn't update until model changes

Question

I have a simple select with an ngFor and the select box is empty until I type into one of the other fields and then it magically shows the data even though I know it completed the data call previously.

My view

<div class="form-group col-md-3">
    <label for="payerId">PayerId</label>
    <select class="form-control">
        <option *ngFor="#item of model.payers">{{item.HealthPlanName}}</option>
    </select>
</div>
<div class="form-group col-md-3">
    <label for="providerType">Provider Type</label>
    <input type="text" class="form-control" [(ngModel)]="model.providerType"/>
</div>

My Component

import {Component, Injectable, OnInit, View} from "angular2/core";
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, NgFormControl, NgFor} from "angular2/common";
import {CoverageService} from "../../services/coverage/coverage.services";
import "rxjs/Rx";

@Component({
    selector: "coverage",
    providers: [CoverageService]
})
@View({
    templateUrl: "/Scripts/appScripts/components/coverage/coverage.html",
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, NgFormControl, NgFor, PayerSelector]
})
export class CoverageComponent implements OnInit {
    model = new CoverageRequest();
    constructor(private coverageService: CoverageService) {}
    ngOnInit() {
        this.getPayers();
    }
    getPayers() {
        this.coverageService.getPayers()
            .subscribe(resp => {
                this.model.payers = resp;
            });
    }  
}

Really scratching my head.

Here are the libraries I am using:

"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "^0.19.20",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
}

My Service

import {Http, Response} from "angular2/http";
import {Injectable} from "angular2/core";
import {COVERAGE_BASE} from "../../config";
import "rxjs/Rx";

@Injectable()
export class CoverageService {
    constructor(public http: Http) {

    }

    getPayers(): any {
        return this.http.get(COVERAGE_BASE + "/Payers")
            .map((response: Response) => response.json());
    }
}

Data

[{
    "Id": 3817,
    "ProviderId": 2,
    "ApiPayerId": "00028",
    "HealthPlanName": "Georgia Medicaid",
    "Type": null,
    "PayerSynonyms": null
}, {
    "Id": 3818,
    "ProviderId": 2,
    "ApiPayerId": "00143",
    "HealthPlanName": "J. F. Molloy and Associates Inc.",
    "Type": null,
    "PayerSynonyms": null
}]

Answer 1

Try initiating the model in ngOnInit instead of directly in the class. You will need to use the elvis operator in the view, because the model initially will be undefined. Read more about the elvis operator here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#sts=The%20Elvis%20operator%20(%20%3F.%20)%20and%20null%20property%20paths

I am not entirely sure but i think it should work.