Semantic UI dropdown with angular not clear selected value

Question

I've created a small sample of what is happening.

http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF

Basically, the HTML is:

<div data-ng-app="app" data-ng-controller="main">
    <select class="ui dropdown" id="ddlState" data-ng-options="s.name for s in states track by s.id" data-ng-model="selectedState"></select>    
    <select class="ui dropdown" id="ddlCity" data-ng-options="c.name for c in cities track by c.id" data-ng-model="selectedCity"></select>
</div>

And the javascript is:

 angular.module("app", [])
  .controller("main", function($scope, $timeout) {
    $scope.selectedState = {id:1,name:"A"};
    $scope.selectedCity = {id:1,name:"A.1",stateId:1};

    $scope.states = [{id:1,name:"A"},{id:2,name:"B"},{id:3,name:"C"}];

    var fakeDataSource = [
      {id:1,name:"A.1",stateId:1},
      {id:2,name:"A.2",stateId:1},
      {id:3,name:"A.3",stateId:1},

      {id:4,name:"B.1",stateId:2},
      {id:5,name:"B.2",stateId:2},
      {id:6,name:"B.3",stateId:2},

      {id:7,name:"C.1",stateId:3},
      {id:8,name:"C.2",stateId:3},
      {id:9,name:"C.3",stateId:3}
    ];

    $scope.$watch("selectedState", function(n,o){
      if (n !== o)
        $scope.selectedCity = null;

      $scope.cities = fakeDataSource.filter(function(x){
        return n.id === x.stateId;
      });

      $timeout(function(){
        $(".ui.dropdown").dropdown().dropdown("refresh");
      });
    })

    $timeout(function(){
      $(".ui.dropdown").dropdown();
    })
  })

The problem is when I change the first dropdown to value 'B' or 'C', the value of second dropdown does not change , even it is changed in angular model.

You guys can notice that I've the line $(".ui.dropdown").dropdown().dropdown("refresh") to refresh the values but does not work.

I tried destroy and recreate using $(".ui.dropdown").dropdown("destroy").dropdown() but still does not work.

Any help?

Answer 1

Simply using ngModel won't make the values change dynamically. Take a look at the documentation here: https://docs.angularjs.org/api/ng/directive/ngModel

You can bind the values using ngBind or what I have done is do an onChange to then check the value and change your second drop down accordingly. Something like:

$("#ddlState").on("change", function(e) {
    //check $scope.selectedState for it's value, and change #ddlCity/$scope.selectedCity accordingly 
});