How do I automatically set the selected option from an ajax call when the page loads? I am fetching zones using an ajax call and I want to trigger the change function of the zones on page load in order to set the selected option of the cities select box. Here is my code snippet:
<select class="form-control" name="zone_id" ng-model="zone_id" name="zone_id" ng-change="getSearchCities(zone_id)">
<option>Choose zone</option>
<option value="20" selected>Zone 1</option>
.....
</select>
<select class="form-control" name="city_id">
<option>choose city</option>
<option value="{{ city.city_id }}" ng-repeat="city in cities">
{{ city.name }}
</option
</select>
<script>
var SApp = angular.module('searchApp', []);
SApp.controller('searchCtrl', function($scope, $http) {
$scope.getSearchCities = function(zone_id) {
// alert(zone_id);
$http.get("zones.php?zone_id="+zone_id).then(function(response) {
$scope.cities = response.data.city;
});
}
});
</script>