Accessing this.root from an HTTP Observable thing

I have a problem which I think probably shows I do not understand the Angular2 observable thing and/or how scope works in relation to this and/or this.root.

In my app.js I want to test whether the user is authenticated already with a back-end server and if they aren't, I display a login page.

My app.js code is shown below. If I run the code using the call to authenticate1() which is a dummy function with no authentication, the LoginPage is displayed correctly (as I would expect).

However, if I run the code with the call to authenticate2() even though the error line executes, the LoginPage is not displayed (and there is no error).

What am I misunderstanding?

class MyApp {
constructor(platform: Platform,
http: Http
) {
this.http = http;
this.authenticate2();
}

authenticate1() {
this.root=LoginCtrl
}

authenticate2() {
this.http.get(myAuthenticationURL)
.map((res: Response) => res.json())
.subscribe(
res => this.root=TabsPage,
err => this.root=LoginCtrl,
() => console.log('Done')
);
}

}