I have the following structure: I have a list which is filled from JS (100% verified the the list is being filled and no data is missing).

In Angular's HTML, I go over the list with ng-repeat:

<div ng-repeat="attr in x.list track by $index">

Basically, the list is filled out of a JSON file containing FE elements data.

So, in each iteration of the Angular loop, I check what is the type of the element and have it as input.

One of the types is a textbox, and it should be pre-populated with data.

So if the type is a textbox, I fill it according to the following:

<input ng-if="attr.type=== 'textbox'"
                                    name= etc
                                    class=etc
                                    id=etc
                                    ng-minlength= etc
                                    ng-pattern= etc
                                    ng-maxlength= etc
                                    ng-model= etc
                                    value= etc
                                    ng-init= etc
                                    placeholder= etc
                                    mdn-input= etc
                                    ng-paste= etc
                                    ng-required= etc
                                    ng-disabled= etc

To explain it further, the loop fills all of the elements. For the user, there is a dropdown, and once he chooses anything, the Front End page loads the elements accordingly.

The issue is: When the page loads, the pre-populated data are loaded correctly. However when the user changes the option in Dropdown, the pre-populated data is sometimes NOT ALL loaded! So for example only 2 textboxes out of 4 is loaded.

Any ideas?

Thank you.