javascript - How do I data bind a custom semantic ui dropdown to angularjs directive -

there 2 dropdowns second 1 gets states first dropdowns selected country. problem using semanticui's menu data-ng-model='selectedcountry' value remains undefined when selected , second dropdown remains empty. how can selectedcountry semanticui menu. (this works me when use <select> <option>'s)

markup

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

controller

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";      }   } 

directive

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

note

i use semanticui menu dropdown include country image flags can't regular html <select>