title: AngularJS: Nested http call doesn't update the view
body: <p>In a particular scenario, I need to call the the github api to retrieve a specific user's info. Then issue a second call to retrieve the user's repositories:</p>
  
  <pre><code>search(login: string): void {
         this.user = undefined; 
         // first call               
         this.githubApi.getUser(login)
              .then(user =&gt; {
                  this.user = user;
                  // second call
                  this.githubApi.getRepos(user.repos_url)
                      .then(reposResponse =&gt; {
                          this.repos = reposResponse.repos;
                          // I don't like to call this.$scope.$apply() !!;
                      });
              });
      }
  </code></pre>
  
  <p>The first call gets executed and the bound elements to <code>this.user</code> gets updated with no problem in the view.
  The second call gets executed and the result is returned successfully and <code>this.repos</code> is set correctly. But, the bound elements on the view are not updated. </p>
  
  <p>If I call <code>this.$scope.$apply()</code> in the very last line of the second callback, it makes the view update work but I guess this is not correct approach.</p>
  
  <p>Any solution?</p>