I have following controller definition:

```
var app = angular.module("myapp");

app.controller("ViewCtrl", function($scope) {
    this.panelVisible = true;

    this.panelShowHide = function() {
        this.panelVisible = !this.panelVisible;
    }
});

```

And here is my view:

```
<body ng-controller="ViewCtrl as view">
    <a href="" ng-click="view.panelShowHide()">Button</a>
    {{view.panelVisible}}
</body>

```

From my view I am calling panelShowHide function, and contrary to my expectation `this.panelVisible = !this.panelVisible` line somehow updates controller variable (defined in `this.panelVisible = true;` line)

How is that possible? I understand if I did `$scope.panelVisible`, but since I am doing `this.panelVisible` in panelShowHide function, shouldn't that line create and update new variable defined within the scope of function?

I am asking this so that I better understand the scope in AngularJS since in some more complicated cases (like using $http.get) my this.reference is "properly resolved" (to local variable) and I would prefer the be able to reference controller variables (encapsulate logic).