angular.js - Why is it displayed after clicking ng-options twice when doing cascade address query in angularjs?

Question

When using angularjs for address cascade selection, the background data has been sent, but the options are not displayed the first time you click, and the data will be displayed only the second time,

html:

<p class="w100 bs-bb clearfloat lh30 pt10 pb10p bb-gray" >
                    <!-- sel-provance -->
                    <span class="chooseaddress">省份</span>
                    <select class="w75 lh30 fr mr10p" ng-model="provincename" 
        ng-options="province.code as province.province_name for province in provinces" >
                        <option value="">省份</option>
                    </select><br>
                </p >
                <p class="w100 bs-bb clearfloat lh30 pt10 pb10p bb-gray">
                    <p>Province:{{provincename || 'None'}}</p>
                </p>
                <p class="w100 bs-bb clearfloat lh30 pt10 pb10p bb-gray"  ng-touchend="getCity()">
                    <span class="chooseaddress">市</span>
                    <select class="w75 lh30 fr mr10p" ng-model="cityname" 
                        ng-options="city.code as city.city_name for city in cities">
                        <option value="">市</option>
                    </select><br>
                    <!-- sel -->
                </p>
                <p class="w100 bs-bb clearfloat lh30 pt10 pb10p bb-gray">
                    <p>City:{{cityname || 'None'}}</p>
                </p>
                <p class="w100 bs-bb clearfloat lh30 pt10 pb10p bb-gray" ng-touchend="getArea()">
                    <!-- sel-area -->
                    <span class="chooseaddress">区/县</span>
                    <select class="w75 lh30 fr mr10p" ng-model="areaname"
                        ng-options="area.code as area.area_name for area in areas"></select><br>
                </p>
                

controller:

myApp.controller("newAddressCtrl", function($scope, $state, locals, shareFactory, addressService) {
        $scope.selfInfo = shareFactory.getVal("selfInfo");
        var token = locals.get('token', '');
        var proviceInfo = addressService.provinceService();
        proviceInfo.then(function(p) {
            $scope.provinces = p;
        }, function(p) {
            $scope.error = p;
        });
        
        $scope.requireValue = true;
        $scope.telPattern = new RegExp("^[1][358][0-9]{9}$");
        //点击获取对应的市

        $scope.getCity = function() {

            var cityInfo = addressService.cityService($scope.provincename);
            cityInfo.then(function(c) {

                $scope.cities = c.cities;

            }, function(c) {
                $scope.error = c;
            })

        }

        $scope.getArea = function() {
                var areaInfo = addressService.areaService($scope.cityname);
                areaInfo.then(function(a) {
                    $scope.areas = a.areas;
                }, function(a) {
                    $scope.error = a;
                })
            

        }
        $scope.back = function() {
            history.go(-1);
        }
        $scope.copyText = function() {
            var saveAddress = addressService.addressSaveService(id, $scope.contacter_name, $scope.provincename.province_id, $scope.cityname.city_id, $scope.areaname.area_id, $scope.postal_code, $scope.phone_number, $scope.detailed_address, token);
            saveAddress.then(function(d) {
                console.log(d);
            }, function(d) {
                $scope.error = d;
            })
        }
    })
    
    求助各位大神，请问是哪里的问题？我实在是找不到了T_T

Answer 1

Let’s talk about the key issue. Who has time to read so much code?

Answer 2

I would like to ask, has the problem been solved?