Раскрывающийся список семантического пользовательского интерфейса с угловым непонятным выбранным значением

Я создал небольшой пример того, что происходит.

http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF

В основном, HTML:

<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>

И javascript:

 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();
    })
  })

Проблема заключается в том, что я меняю первое выпадающее меню на значение "B" или "C", значение второго раскрывающегося списка не меняется, даже если оно изменяется в угловой модели.

Вы можете заметить, что у меня есть строка $(".ui.dropdown").dropdown().dropdown("refresh") чтобы обновить значения, но не работает.

Я попытался уничтожить и воссоздать с помощью $(".ui.dropdown").dropdown("destroy").dropdown() но все равно не работает.

Любая помощь?