我如何将自定义语义ui下拉列表绑定到angularjs指令

Question

有两个下拉列表，第二个下拉列表获取第一个下拉列表所选国家/地区的状态。问题是使用semanticui的菜单时，如果选择了某些内容并且我的第二个下拉列表仍为空，则data-ng-model='selectedCountry'值仍未定义。如何从semanticui菜单中获取selectedCountry。 （当<select>与<option>'s一起使用时，这对我有用）

的标记

<div ng-controller="loader">
    <div>
        <countrystate></countrystate>
    </div>
</div>

控制器

function loader($scope, $http) {
     var data = $http.get('Scripts/provinces.json');

     data.then(function (res) {
         $scope.Countries = res.data.countries;
         $scope.States = res.data.provinces;
     });

     data.catch(function (err) {
         console.log("error on : " + err);
     });

     $scope.getStates = function () {
         console.log("selected states: " + $scope.States);
         console.log("selected country " + $scope.Countries);

             var states = $scope.States.filter(function (state) {
                 return state.country === $scope.selectedCountry;
             });
             return states;

     }

    $scope.getFlag = function () {
        console.log(code.toLowerCase() + " flag");
        return code.toLowerCase() + " flag";
     }

 }

指令

function countrystate($scope, $http) {

    return {
        restrict: 'EA',
        scope: false,
        template: `
<div class="input-group">
  <span class="input-group-addon" id="CountryLabel">Country</span>
  <div class="ui fluid search selection dropdown">
    <input data-ng-model='selectedCountry' />
    <i class="dropdown icon"></i>
    <div class="default text">Select Country</div>
    <div id="CountryMenu" class="menu">
      <div ng-repeat='country in Countries' class="item" id='{{country.name}}' value='{{country.code}}' onclick="$('#Country').val(this.id)"><i class="us flag"></i>{{country.name}}</div>

    </div>
  </div>
</div>

<br />
<div class='input-group'>
  <span class='input-group-addon' id='StateLabel'>State</span>
  <select data-ng-model='selectedState' class='ui fluid search selection dropdown'>
       <option value=''>Please select a state</option>
       <option ng-repeat='state in getStates()' id='{{state.name}}' value='{{state.code}}' onclick="$('#State').val(this.id)">{{state.name}}</option>
  </select>
</div>
                        `,
        link: function(scope, element) {

            element.on('click', function() {
            });

            $('.ui.dropdown').dropdown();
            element.dropdown();

        }
    }
}

注释

我想使用semanticui菜单下拉列表，因此我可以包含国家图片标记，而我不能使用常规html <select>