Difference between specifying objects on 'this' and returning the objects itself in a function

Question

I'm a total newbie to javascript. Was just wondering what is the difference between the following when using the controllerAs approach, and why the second approach doesn't work:

angular.module("app")
        .controller("angularController", angularController);

function angularController() {
    this.hello = "hello";
    this.goodbye = "goodbye";
}

and

angular.module("app")
        .controller("angularController", angularController);

function angularController() {
    var hello = "hello";
    var goodbye = "goodbye";

    return {
        hello: hello,
        goodbye: goodbye
    }
}

Answer 1

The function you register with angular.module.controller is not a factory, it's a constructor.

The second approach is more often used with Angular services.

Answer 2

Change this in your second approach

this.hello:hello;
this.goodbye:goodbye;

instead of

hello:hello;
goodbye:goodbye;

Answer 3

In the second approach you return tha values in the function call, this is why dont work, the HTML dont call functions, the HTML access propierties.

In the first approach the values are propierties of the controller, this make possible you access the values from the HTML.