Currently, I am implementing AngularJS along with select2 (not using ui-select).
In my view, the following code is present:
<select
name="rubros"
id="rubros"
class="select2 form-control"
ng-model="vm.comercio.tags"
ng-options="rubro.nombre for rubro in vm.rubros track by rubro.id"
multiple>
</select>
The select element is bound to a variable named "comercio.tags," which is an array of objects.
An interesting issue arises where at times the tags are displayed correctly, while other times they do not appear on the screen despite the binding functioning as expected.
This erratic behavior occurs randomly. Upon refreshing the browser multiple times (using F5), the error may show up and disappear unpredictably.
Here are some images for reference:
https://i.sstatic.net/1KTcv.png
https://i.sstatic.net/8s2Q4.png
https://i.sstatic.net/7J0uL.png
The tags are fetched via a GET request using $http.
It's puzzling because the issue seems to be occurring inconsistently.
Update:
Additional code requested by a helper member
//controller initialization before this
var scope = this;
var id = $routeParams.id; //the ID of the commerce/store being edited and preloaded on the page
//variable to store the retrieved commerce/store
scope.comercio = {
tags:[]
};
/*
HTTP request to fetch the commerce/store with "id"
The retrieved model has a tags property that is properly populated (as evident in the images showing input above select2, utilized for debugging)
*/
$http.get("http://localhost:8000/api/comercio/" + id).then(function (response) {
scope.comercio = response.data.model;
},
function (response) {
scope.comercio = null;
});
//further controller instructions and declarations