How to create a directive for a drop-down list?

Question

Suppose I use quite different drop-down options (aka comboboxes) for countries in my application. To avoid repeating the same code over and over, I want to create a directive for it.

However: using the following directive does not meet all my expectations (see below), while copying the template meets my expectations.

app.directive('countrydropdown', function($compile) {
  return {
    restrict: 'E', //attribute or element
    scope: {
      countryUri: '='
    },
    templateUrl: 'countrydropdown.html',
    controller : function($scope) {
      $scope.listItems = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Åland Islands', code: 'AX'},
        {name: 'Albania', code: 'AL'},
      ];      

where is my template:

<div>
  model (inside directive): {{countryUri}}

   <ui-select ng-model="countryUri" theme="selectize" >
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="'/api/countries/'+country.code as country in listItems | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

</div>

What do I expect from this:

• Modifying the first combo, modifies the $ scope.mydata.selectedCountry model. This change should also affect / update the second combination.
• Changing the second combo, changing the $ scope.mydata.selectedCountry model. The first combo should also be affected / updated here.
• ( $scope.mydata.selectedCountry == null)

- , . plukr: http://plnkr.co/edit/oF1R0F1udfiRulx5NvLO?p=preview

, , , . ( ) , ""

?

Answer 1

, <ui-select> ng-model . / : https://github.com/angular/angular.js/wiki/Understanding-Scopes

, :

<ui-select ng-model="countryData.selectedCountry"></ui-select>

Plunkr: http://plnkr.co/edit/wCiUoI4aeYPs01FMIVwO

Edit: "selectedCountry" , :

<country-dropdown country-data="mydata" field="selectedCountry"></country-dropdown>

:

<ui-select ng-model="countryData[field]">
 ...
</ui-select>

Plunkr: http://plnkr.co/edit/KdgF8U2KqfiqVZS6BS5N