Q:

Javascript variables & scope

I am new to Javascript and Angular and am a bit confused as to how the below code is executing:
angular.controller('TestController',function($scope){
    $scope.counter = {clicks:0};
    $scope.count = function(){
        $scope.clicks += 1;
    }
});

I am able to write $scope.clicks += 1 and the count increases correctly by 1. Isn't counter a Javascript object and dont we have to write it as $scope.counter.clicks += 1?

A:

You are correct. It IS a javascript object and you should be writing $scope.counter.clicks += 1 if this is the variable you want to increment.
I assume you are binding with {{clicks}} and therefore you think it is working correctly, but it isn't (this is a different property on the scope). You should be binding {{counter.clicks}} to see the "real" value.
You can write a console.log line inside the count() function to see the true value of $scope.counter.clicks and check for yourself.

