title: ionic 2 template running before subscribe data
body: <p>I'm grabbing data from a remote URL and passing it to my template. However on the inital view of the page it's not showing the first index of the object, only the second. When I leave the tab and go back to it, it then shows both objects. And on the inital load when i log the object they are both there.</p>
  
  <p>After looking here: <a href="https://stackoverflow.com/questions/40291111/angular-2-first-item-in-array-missing-using-ngfor">Angular 2 First Item in Array Missing using *ngFor</a></p>
  
  <p>I feel it may have to do with missions.ts being an entry component. But when I remove it then I get an error about a missing factory. </p>
  
  <p>missions.ts</p>
  
  <pre><code>missions: any;
    constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, private storage: Storage) {
      this.http.get('http://hunt/api/getMissions').map(res =&gt; res.json()).subscribe(data =&gt; {
              this.missions = data;
              console.log(data);
          }); 
    }
  </code></pre>
  
  <p>Missions.html</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;ion-list&gt;
      &lt;button ion-item *ngFor="let mission of missions" (click)="selectMission(mission.id)"&gt;
      {{ mission.name }}
    &lt;/button&gt;  
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>