Struggling with AngularJS while working on a project, I encountered an issue with a 'select-options' element.
Currently, I am making a $http request to retrieve data from a Cloud SQL database.
To achieve this, I am invoking a function from my factory that fetches the data from the database.
This is the JavaScript code I am working with.
In the code snippet, you can see that I initialize the 'controller.connections' variable with an array containing 2 values (1 and 2).
After fetching the data using the 'f_getData' function, I modify the values in that array (adding 4 values, although I am not using the fetched data to just test, but the outcome remains the same).
Here is the HTML code snippet I am referring to.
For your reference, my ng-app directive is on the 'html' tag, and the ng-controller directive is on the 'body' tag. I am using ng-repeat for my options as I encountered the same issue using ng-options as well. Just below the select element, I have another ng-repeat with the same conditions to test.
This is the observed behavior I am trying to address.
It appears that the variable used in the ng-repeat for my select element is not getting updated. However, the same variable is updated in the ng-repeat on the 'p' tag.
Attempting various solutions such as :
- Using $scope.$apply() in the callback ('then'), which results in console messages stating that $digest is in progress. I also tried placing it after the callback, where it mentions that $apply() is executing, and even attempted a $timeout of 2 seconds, but it had no effect.
- Using $scope.connections instead of controller.connections, but this seemed to cause issues as ng-repeat generates its own scope.
- Introducing a temporary variable for the large array within the callback, then updating the value of my 'connections' variable to this temporary variable outside the callback, and finally calling $scope.$apply(). Despite this, the ng-repeat for my options does not reflect the update, whereas the ng-repeat on the 'p' tag does.
In essence, my challenge lies in my inability to utilize ng-repeat or ng-options effectively to create a dynamic select input. Seeking advice and solution from the community. Thank you in advance.