title: Angular 2 template variable not getting updated
body: <p>I have a class variable called queryData which stores the json response recieved using http get . However the template does not get updated with the received json.</p>
  
  <p>My main.ts </p>
  
  <pre><code>import {bootstrap}    from 'angular2/platform/browser';
  import {AppComponent} from './app.component';
  import { HTTP_PROVIDERS } from 'angular2/http';
  
  bootstrap(AppComponent,[ HTTP_PROVIDERS ]);
  </code></pre>
  
  <p>app.components.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {QueryInputComponent} from './query-input.component'
  import {QueryOutputComponent} from './query-output.component'
  
  @Component({
      selector: 'ci',
      template: `&lt;div&gt;
      &lt;query-input&gt;&lt;/query-input&gt;
      &lt;query-output&gt;&lt;/query-output&gt;
      &lt;/div&gt;`,
      directives: [QueryInputComponent,QueryOutputComponent],
  
  })
  export class AppComponent { }
  </code></pre>
  
  <p>query-input.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {NgForm} from 'angular2/common';
  import {Injectable}     from 'angular2/core';
  import {Http, Response} from 'angular2/http';
  import {Observable}     from 'rxjs/Observable';
  import 'rxjs/Rx';
  import {QueryOutputComponent} from './query-output.component'
  import {QueryOutputData} from './query-data.service';
  
  @Component({
      selector: 'query-input',
      templateUrl: 'app/query-input.html',
      providers: [QueryOutputComponent,QueryOutputData],
  })
  
  @Injectable()
  export class QueryInputComponent {
    constructor( private t1:QueryOutputComponent) { }
    onClick(queryForm: NgForm)
    {
      //console.log(queryForm.value);
      let from_timestamp= queryForm.value.from_timestamp;
      let to_timestamp= queryForm.value.to_timestamp;
      /*let time_range = queryForm.value;
      for (var property in time_range) {
          if (time_range.hasOwnProperty(property)) {
            if(time_range[property]&lt;10)
            {
              time_range[property]="0"+time_range[property];
            }
              //console.log(time_range[property]);
          }
      }
      let from_timestamp :string=String(time_range.from_year)+"-"+String(time_range.from_month)+"-"+String(time_range.from_date)+"T"+String(time_range.from_hour)+":"+String(time_range.from_minute)+":"+String(time_range.from_second)+"Z";
      let to_timestamp :string=String(time_range.to_year)+"-"+String(time_range.to_month)+"-"+String(time_range.to_date)+"T"+String(time_range.to_hour)+":"+String(time_range.to_minute)+":"+String(time_range.to_second)+"Z";
      console.log(from_timestamp);
      console.log(to_timestamp);*/
      this.t1.passUrlParams(from_timestamp,to_timestamp);
    }
  
  }
  </code></pre>
  
  <p>query-output.component.ts</p>
  
  <pre><code>import {Component,Input} from 'angular2/core';
  import {QueryOutputData} from './query-data.service';
  @Component({
      selector: 'query-output',
      template: `&lt;h1&gt;give query output hereeee&lt;/h1&gt;
                  &lt;div&gt;{{queryData | json}}&lt;/div&gt;`,
      providers: [QueryOutputData]
  })
  export class QueryOutputComponent{
    queryData:Object;
    compute()
    {
      console.log("Rock and roll");
      console.log(this.queryData);
      }
    constructor(private data: QueryOutputData){ }
    passUrlParams(from_timestamp:string,to_timestamp:string)
    {
      console.log(this.queryData);
      let h="blah";
      console.log("Working");
      console.log(from_timestamp);
      console.log(to_timestamp);
      let url='http://127.0.0.1:8000/v1/ct/aws/q100/blah/'+from_timestamp+'/'+to_timestamp+'/';
      this.data.getTemp(url).subscribe(res =&gt; { this.queryData=res; this.compute();});
    }
  
  }
  </code></pre>
  
  <p>Here the queryData variable is updated with the json response but the template is not updated accordingly. Please let me know where I might be going wrong.</p>