I'm encountering an issue with the 'select' element. When I choose an option in the first 'select', the result does not immediately appear in the second 'select'. Instead, I have to manually refresh the page using 'F5' in order to see the results. add_parcelle.html
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{'has-error':Form.type.$dirty && Form.type.$invalid, 'has-success':Form.type.$valid}">
<label for="form-field-select-2">
Type of parcel <span class="symbol required"></span>
</label>
<select name="type" ng-model="type" title="select" class="cs-select cs-skin-elastic" ng-change="sendType(Form.type.$modelValue)" required>
<option value="" disabled selected>Select a type</option>
<option value="Lot">Lot</option>
<option value="Parcelle">Parcel</option>
<option value="Zone">Zone</option>
<option value="Plant">Plant</option>
</select>
<span class="error text-small block" ng-if="Form.type.$dirty && Form.type.$invalid">Field is required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{'has-error':Form.idParcelle.$dirty && Form.idParcelle.$invalid, 'has-success':Form.idParcelle.$valid && Form.idParcelle.$dirty}">
<label for="form-field-select-2">
Parent parcel <span class="symbol required"></span>
</label>
<select data-ng-init="showParents()" name="idParcelle" ng-model="idParcelle" title="select" class="cs-select cs-skin-elastic">
<option value="" disabled selected>Select a parent</option>
<option value="1">No parent</option>
<option ng-repeat="p in parcelle" value="{{p.idParcelle}}"><div ng-if="p.parent.libelle">{{p.libelle}}</div></option>
</select>
<span class="error text-small block" ng-if="Form.idParcelle.$dirty && Form.idParcelle.$invalid">Field is required</span>
</div>
</div>
</div>
ParcelleController.js
$scope.sendType= function(type){
$sessionStorage.typeParc=type;
console.log($sessionStorage.typeParc);
};
$scope.showParents = function() {
if($sessionStorage.typeParc=='Parcelle')
$scope.showLots();
else if($sessionStorage.typeParc=='Zone')
$scope.showParcels();
else if($sessionStorage.typeParc=='Plant')
$scope.showZones();
};
In the first 'Select', I am using:
ng-change="sendType(Form.type.$modelValue)"
This allows me to store Form.type and use it in the function showParents(), which displays the result in the second 'Select'.
data-ng-init="showParents()"
However, this is causing my problem! Any help would be greatly appreciated. Thank you in advance :)
After editing by 'Gustavo Gabriel', this is the result: click here for image description
I can see the list in the 'select' when checking console but not on the page itself :p