A simple AngularJS directive to create timezone select. It uses select2 to create auto-complete timezone select. Timezone information comes from moment. Countries timezone data comes from TimezoneDB.

In the dropdown, timezones are divided into three groups:

UTC - UTC is a common option for most users.
Common - Timezones for a country
Other - Other timezones

If the user has already selected the country, timezones for the country will be listed first, which makes easier for user to select.

Usage

Make your Angular module depend on module angular-timezone-select.

angular.module('timezoneSelectExample', ['angular-timezone-select']);

Then use directive timezone-select.

<input timezone-select data-ng-model="timezone" country="country">

Attribute country can be used to bind user's selected country. Value of selected country should be the ISO 3166-1 alpha-2 code, e.g. CN, US.

See example.html for a simple example.

Thanks to

(alxlit's bootstrap-chosen)[https://github.com/alxlit/bootstrap-chosen]