ng-options Set ng-model value as selected item in

Question

I have a different case here with ng-options

I have two modes for my app. New mode and Edit mode

I have SELECT input types for DISTRICTS and VILLAGES. The VILLAGES select is populated based on DISTRICT selection using ng-change event of DISTRICT select. This works fine in NEW mode.

But when in EDIT mode, the DISTRICT is correctly showing the value of ng-model. But the VILLAGE select input item is not showing the ng-model value. This is because, the village select does not have any items populated in it as the ng-change event of DISTRICT never triggers in EDIT mode.

I still want to show the ng-model value of VILLAGE as selected item in the drop down, even if it does not have any options in it. (in EDIT mode)

Any ideas of how this can be done? Please shed some light

Here the code below for DISTRICT select

                            <select class="form-control" name="district" id="field_district" ng-model="vm.apeksha.district" required 
                        ng-change="vm.updateblocks(vm.apeksha.district)"
                        ng-options="x.malDistName as x.malDistName for x in vm.masterDistricts " >

Here is the code for VILLAGE select input item

                   <select class="form-control" name="village" id="field_village" ng-model="vm.apeksha.village" 
                            ng-options="village.M as village.M for village in vm.villagelist track by village.M"
                            required >
                            <option value="{{ vm.apeksha.village }}">{{ vm.apeksha.village }}</option>
                                    </select>  

The option item is not shown even if there is value on "vm.apeksha.village"

In controller, we have a function which uses a factory to update the list of data corresponding to each DISTRICTS. Here is he code of controller

      /**
       * Update dropdown boxes of VILLAGES, THALUKS, PO AND BLOCS
       * based on district selection
       */
    vm.updateblocks = function(districtName) {
        vm.blockslist = masterDataPopulator.getBlocksForDistrict(districtName);
        vm.postofficelist = masterDataPopulator.getPostOfficesForDistrict(districtName);
        vm.villagelist = masterDataPopulator.getVillagesForDistrict(districtName);
        vm.thalukList = masterDataPopulator.getTaluksForDistrict(districtName);

      };

Any ways to do this?

Answer 1

I suggest you to go for ng-options in this case instead of ng-repeat with <option> tag.

The above is the list of category. Selecting one category will load the dropdown with the subcategories as below,

Category

<select class="home_search_select" name="d1" ng-model="selectedd1" ng-change="homeChanged()" ng-options="cat as cat.category_name for cat  in categorydata track by cat.category_id" id="d1">
      <option ng-value="">Select Category</option>
    </select>

SubCategory

<select class="home_search_select" name="d2" id="d2" ng-model="selectedd2" ng-options="subcat.ID as subcat.Name for subcat in selectedd1.Subcategory track by subcat.ID">
      <option class="home_search_select" value="">Select Sub Category</option>
</select>

When the first one is selected, bind the value to the ng-model of second dropdown in the ng-change event

$scope.homeChanged=function(){
    console.log($scope.selectedd1)
  }
  $scope.selectedd2 ={
      "Name": "Two Wheeler",
      "ID": "1"
    };

LIVE DEMO