So, right as other answers tell, it's because that console.log is being executed right away.

So, I'd like to tell a few extra points:

1. It's better to use functions with ng-click instead of inline js code.
2. At HTML you can use {{variable}} for $scope interpolation.
3. There are $watch functions available.

$scope interpolation

So $scope is a glue between you controller and your JS code at controllers. You don't need to place {{$scope.variable}} because $scope becomes the global variable at markup.

This works great for app logic, useful when using ng-repeat, for example or just for fast debugging.

$watch functions

You could have, at your controller:

$scope.$watch('metric', function(newValue, oldValue){
  console.log("$scope.metric just changed from " + oldValue + " to " + newValue);
});

This is really useful for more sofisticated app logic, workflow and control. But you shouldn't do it for debugging.

About your question at last comment on what's being executed first, please check the docs on data binding and digest cycle.