How controller components are instantiated in AngularJS?

This is my controller.

angular.module('homePage').controller('buttonViewCtrl',  [function() {
    console.log(this);
    this.buttonDisplay = false;
    console.log(this);

    this.nav = function() {
        console.log(this);  //returns Object {buttonDisplay: false}
        //console.log(JSON.stringify(this));
        this.buttonDisplay = true;
    };

    this.closeNav = function() {
        console.log(this); //returns Object {buttonDisplay: true}
        //console.log(JSON.stringify(this)); 
        this.buttonDisplay = false;
    };
}])

The first console.log method logs an empty object.

The second console.log method logs the controller object with a property buttonDisplay added to it.

The third console.log method (in nav()) logs the controller object with all its methods like so:

The fourth console.log method logs the same object with the buttonDisplay property changed.

I have two questions.

1) From this example, as per my understanding, when Angular sees a controller definition it declares an empty object. It then attaches properties to the object as they are executed. My question is that how come when the nav() method is triggered, it detects that there are other methods in the controller and attaches them to the controller object too (closeNav() in this case). The behavior I expected was it to attach only the nav() method when it was triggered, and when closeNav() would be triggered it would attach that too to the controller object. As you can see though, in figure 3, Angular has attached closeNav() to the controller without it being triggered. How is Angular doing this?

2) According to the best practices of Angular, we should not manipulate the DOM in the controller. In my controller, the nav() function dispalys a navigation bar template and the closeNav() function closes it. Is this considered as DOM manipulation? Am I adding too much presentation logic in my controller?