Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="ngTest">
      <div ng-controller="TestCtrl">
          <select select-country ng-model="data.country"></select>
      </div>
  </body>

</html>

'use strict';

angular
    .module('ngTest', [])
    .controller('TestCtrl', function($scope) {
        $scope.data = {
            country: 'de'
        };
    })
    .directive('selectCountry', function () {
        return {
            restrict: 'A',
            scope: true,
            link: function ($scope, elem, attrs) {
                attrs.ngOptions = 'country.code as country.name for country in countryList | orderBy:"name"';
            },
            controller: function ($scope) {
                $scope.countryList = [
                    {
                        code: 'de',
                        name: 'Germany'
                    },
                    {
                        code: 'fr',
                        name: 'France'
                    }
                ];
            }
        };
    })

/* Styles go here */