There is a specific scenario where I am required to make a call to the Github API in order to fetch the information of a particular user. Following that, I need to issue another call to retrieve the repositories belonging to that user:
search(login: string): void {
this.user = undefined;
// initial call
this.githubApi.getUser(login)
.then(user => {
this.user = user;
// secondary call
this.githubApi.getRepos(user.repos_url)
.then(reposResponse => {
this.repos = reposResponse.repos;
// I am hesitant to use this.$scope.$apply() here!;
});
});
}
The first call works successfully and updates the elements bound to this.user without any issues in the view.
The second call also executes properly, returns the desired result, and sets this.repos correctly. However, the view does not reflect these changes.
Adding this.$scope.$apply() at the end of the second callback resolves the update issue in the view, but I believe there might be a better approach to handle this.
Any suggestions for a solution?