title: Ionic 2: View does not update based on model change
body: <p>I have a very simple page with a couple of controls.</p>
  
  <p>My issue is that the page does not pickup changes to the model when the icon in upper right corner is clicked. This toggles the showFilterPane variable, which again should show or hide a div based on *ngIf="showFilterPane".</p>
  
  <p>I have another page just like this one working, and I can not figure out why this isn't.</p>
  
  <p>Any tips?</p>
  
  <p>(I've tried using the ChangeDetectorRef.detectChanges(); which works, but then the rangeslider will not work. The draggable point doesn't update, or does not move to where you tap.)</p>
  
  <p>The page:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;MY AO&lt;/ion-title&gt;
      &lt;ion-buttons end&gt;
        &lt;button ion-button (click)="toggleFilterPane()" icon-only&gt;
          &lt;ion-icon name="options"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;div class="container"&gt;
      &lt;div class="left"&gt;
        &lt;div *ngIf="isSearching" class="spinner-container"&gt;
          &lt;ion-spinner&gt;&lt;/ion-spinner&gt;
        &lt;/div&gt;
        &lt;!-- put content here --&gt;
  
      &lt;/div&gt;
  
      &lt;div class="right" *ngIf="showFilterPane"&gt;
        &lt;ion-list inset&gt;
          &lt;ion-list-header&gt;BANA&lt;/ion-list-header&gt;        
          &lt;ion-item&gt;
            &lt;ion-select multiple="true" [(ngModel)]="woTrackFilter"&gt;
              &lt;ion-option&gt;1&lt;/ion-option&gt;
              &lt;ion-option&gt;2&lt;/ion-option&gt;
              &lt;ion-option&gt;3&lt;/ion-option&gt;
              &lt;ion-option&gt;4&lt;/ion-option&gt;
              &lt;ion-option&gt;5&lt;/ion-option&gt;
            &lt;/ion-select&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
        &lt;ion-list inset&gt;
          &lt;ion-list-header&gt;TEKNIKSLAG&lt;/ion-list-header&gt;
          &lt;ion-item&gt;
            &lt;ion-select multiple="true" [(ngModel)]="woDisciplineFilter"&gt;
              &lt;ion-option&gt;Signal&lt;/ion-option&gt;
              &lt;ion-option&gt;Bana&lt;/ion-option&gt;
              &lt;ion-option&gt;EL&lt;/ion-option&gt;
              &lt;ion-option&gt;Tele&lt;/ion-option&gt;
            &lt;/ion-select&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;    
        &lt;ion-list inset&gt;
          &lt;ion-list-header&gt;DAGAR&lt;/ion-list-header&gt;
          &lt;ion-item&gt;
            &lt;ion-range min="10" max="80" step="4" [(ngModel)]="woDaysFilter"&gt;
              &lt;ion-label range-left&gt;10&lt;/ion-label&gt;
              &lt;ion-label range-right&gt;80&lt;/ion-label&gt;&gt;
            &lt;/ion-range&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
        &lt;button ion-button (click)="doSearch()"&gt;Search&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The component:</p>
  
  <pre><code>    import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { WorkOrderDashboardPage } from "../work-order-dashboard/work-order-dashboard";
  @Component({
    selector: 'page-work-order-list',
    templateUrl: 'work-order-list.html'
  })
  export class WorkOrderListPage {
    private isSearching: boolean = false;
    private showFilterPane: boolean=false;
    private woTrackFilter: string[];
    private woDisciplineFilter: string[];
    private woDaysFilter: number;
  
    constructor(public navCtrl: NavController, public navParams: NavParams) {
      // Initialize storage providers here
  
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad WorkOrderListPage');
    }
  
    toggleFilterPane(): void {
      this.showFilterPane = !this.showFilterPane;
    }
  
    viewWorkOrder(event, workOrder): void {
      this.navCtrl.push(WorkOrderDashboardPage, { workOrder: workOrder });
    }
  
    doSearch(): void {
      console.log(this.woTrackFilter);
      console.log(this.woDisciplineFilter);
      console.log(this.woDaysFilter);
    }
  }
  </code></pre>
  
  <p><strong>UPDATE: Found workaround</strong>
  I tried creating a separate app, where the exact same code is working. That lead me to think something wasn't right on the LoginPage, the page that called setRoot() to the above page.</p>
  
  <p>The login code looked like this:</p>
  
  <pre><code>WLAuthorizationManager.login("UserLogin", data).then(() =&gt; {
    // Success
    console.log("Logged in");
    this.navCtrl.setRoot(WorkOrderListPage);    
  },
  (err) =&gt; {
    // failed
    console.error(err);
    this.showError("Username or password is incorrect");
  })
  </code></pre>
  
  <p>I then figured it might be some Zone issue, and wrapped the setRoot call in zone.run() like this:</p>
  
  <pre><code>  WLAuthorizationManager.login("UserLogin", data).then(() =&gt; {
    // Success
    console.log("Logged in");
    this.zone.run(() =&gt; 
      this.navCtrl.setRoot(WorkOrderListPage)
    );    
  },
  (err) =&gt; {
    // failed
    console.error(err);
    this.showError("Username or password is incorrect");
  })
  </code></pre>
  
  <p>After that the view started to respond as expected. I feel this is a bit of a hack. Can someone shed some light as to what is happening here?</p>