Data binding Controller-Service: works for objects but not for numbers

In JavaScript, composite types (objects, arrays) are passed by reference (copy of a reference, to be precise), and primitives (strings, numbers, booleans) are passed by value.

36 is a primitive. When you pass your primitive from your service (myService.int_var) into your controller ($scope.int_var) the 36 is passed by value. When you change $scope.int_var to 42 the myService.int_var variable will not reflect the change (this is per language design).

On the other hand, myService.json_var is a composite. When you pass myService.json_var to $scope.json_var, a reference to the myService.json_var object is passed by value to the $scope.json_var variable. When you change something inside that variable (e.g. if you change json_var.val to 18), the change will be reflected inside the myService.json_var object as well, so myService.json_var.val will equal 18 as well.

tl;dr Make sure there's always a dot "." somewhere when you're passing things around in Angular.

Numbers aren't mutable. Binding to numbers sucks, cause as soon as the number changes, you lost reference what you are bound, as the reference to the old number is lost (to you). If you are going to reference numbers that will be changing, you have to place them in an object and then bind to the object (cause objects are mutable).

When learning Angular, I ran into this same frustration. I think that a lot of people do.