$scope.variable vs $scope.data.variable

1

So I was about to post quite a lengthy question asking how I could bind a $scope variable with a dynamically generated form which also accesses said $scope variable.

e.g. $scope.inputVariable

I just couldn’t get it to work, hell even when writing console.log($scope.inputVariable) it wouldn’t actually show what was within the text input.

The solution I’ve used before which worked in this instance too was to encapsulate inputVariable in a data object

$scope.data = {
 inputVariable: 'wooples'
};

as soon as I did this everything started working as expected. I’m sure there’s a reason for this, but can anyone point me in the direction of, or tell me, why angular seems to handle data within objects better than data directly in the scope?

Ta!

2

It seems that you’ve a had a scope inheritance problem. Because of the way javascript protoryping works, primitive values do no change between child<>parent scopes. If the value is part of an object inheritance works as expected.

Explained here:

3

Thank you ever so much! I had no idea how to word the issue I was having to be able to search for it myself, that’s perfect thank you.