One reason for this behavior is the use of ng-repeat, which creates a child scope. As a result, the reference to the "name" variable inside the ng-repeat differs from the original one in the names array. More information can be found here:
It's important to note that ng-repeat, ng-switch, ng-view, and ng-include all generate new child scopes, leading to issues when working with these directives. (For a quick demonstration, check out this .)
The reason behind this phenomenon is that by binding the input to the "name" variable within the ng-repeat, a new property called "name" is created on the child scope established by the directive. This causes the ng-model of the textbox created by the ng-repeat to refer to a different "name" compared to the actual first element of the names array. To prevent this, it is recommended to utilize names[$index] to implicitly refer to the first element of the names array without creating a new "name" property on the child scope. Binding ng-models to objects rather than primitives is considered a best practice in Angular development, as mentioned by Sandy in their response. Additionally, using $index to access the first element of the names array can help resolve this issue, as highlighted by other contributors. Understanding scope inheritance nuances in Angular is crucial; more insights can be found here.
For additional resources, check out:
This link and this one.