I've got into AngularJS recently and trying to create a registration form where I would fill country list from my JavaScript config that is widely used elsewhere, thus I keep it as JS object.

I've been trying to use ng-repeat-start and \*-end on my select input, but it fails.

The main question is, how do I load countries array and iterate it in my template?

**Edit: 30.11.2014 - Better examples**

HTML:

```
<div class="form-group">
                <label for="phone">Country</label>
                <select-country ng-model="credentials.country"></select-country>
                <pre>{{credentials.country}}</pre>
            </div>

```

File:

> 
> /public/directives/countrySelector.directive.js
> 
> 
> 

Directive contents:

```
'use strict';

angular.module('app', [])
.value('countries', [
    {name: 'Afghanistan', code: 'AF'},
    {name: 'Åland Islands', code: 'AX'}
])
.directive('selectCountry', ['countries', function (countries) {
    function link (scope, element, attrs) {
        scope.countries = countries;
    }

    return {
        template: '<select ng-options="country[1] as country[0] for country in countries"' +
        '        ng-model="credentials.country">' +
        '</select>',
        link: link,
        scope: {
            credentialsCountry: '='
        }
    };
}]);

```