title: view not updating even when observable changes
body: <p>In one of my previous questions (<a href="https://stackoverflow.com/questions/46045819/dynamically-create-md-card-from-api-response">dynamically create md-card from API response</a>), I dynamically create cards based on a number of responses from an API. </p>
  
  <p>This is the service which makes API calls:</p>
  
  <pre><code>@Injectable()
  export class WebSearchService {
  
    private readonly _results$$ = new BehaviorSubject([]);
    private readonly _isLoading$$ = new BehaviorSubject(false);
  
    public readonly results$ = this._results$$.asObservable().shareReplay();
    public readonly isLoading$ = this._isLoading$$.asObservable();
  
    public term: string;
    p: number; // page
  
    public config = {
      itemsPerPage: 10,
      currentPage: this.p,
      totalItems: 100
    };
  
    constructor(private http: Http){
    }
  
    search(term: string, page?: number){
  
      return this.http.get(`my/api/{term}`).do(response =&gt; {
        this._isLoading$$.next(false);
        this.config.totalItems = response.json().estimated_total;
        this.config.currentPage = this.p;
      })
        .map(response =&gt; response.json().results as WebResult[]).map(result =&gt; {
          this._results$$.next(result);
          this.term = term;
          return result;
        })
      .take(1);
    }
  
    updatePage(page: number){
      this.p = page;
      return this.search(this.term, page);
    }
  
  }
  </code></pre>
  
  <p>The component which uses the results from the service:</p>
  
  <pre><code>export class ResultsComponent implements OnInit {
    private readonly _results$$ = new BehaviorSubject([]);
  
    public readonly isLoading$ = this.webService.isLoading$;
    public results$ =  this.webService.results$;
    p = 1; //
  
    constructor(public webService: WebSearchService) { }
  
    ngOnInit() { //
    }
  
    changePage(page: number){
      console.log('Page: ' + page);
      this.results$ = this.webService.updatePage(page);
    }
  </code></pre>
  
  <p>and the template:</p>
  
  <pre><code>&lt;ng-template [ngIf]="isLoading$ | async" [ngIfElse]="results"&gt;
    is loading ...
  &lt;/ng-template&gt;
  
  &lt;ng-template #results&gt;
    &lt;div class="container-fluid" *ngFor="let result of results | paginate: this.webService.config"&gt;
      &lt;!-- cards get dynamically created here --&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;pagination-controls *ngIf="(results$ | async)?.length&gt;0" maxSize="6"
                       previousLabel=""
                       nextLabel=""
                       align="center"
                       (pageChange)="changePage($event)"
                       class="my-pagination"
                       screenReaderPaginationLabel="Pagination"
                       screenReaderPageLabel="page"
                       screenReaderCurrentLabel="You are on page"
                       autoHide="true"
  &gt;&lt;/pagination-controls&gt;
  </code></pre>
  
  <p>I have another component which calls the <code>search</code> method in the service. However, the view does not get updated if the search is invoked whilst on any page except page 1. E.g. If I go to page 3 of the results view, and then perform another search, then the <code>results$</code> observable gets updated, but the view remains on the old search results. I have to manually change to page 1 in pagination to get the new results. Is there any way to automatically refresh the view?</p>
  
  <p>I have tried my best to explain the problem. The project is quite large so I am unable to create a plunkr but willing to explain/provide more code. </p>
  
  <p>Any help is appreciated. </p>