This project is an angular module you can use to quickly add geographical location fields to your web forms.
It also contains a demo you can check to see the component in action.
The geographical data provided in this project in several JSON files was extracted from www.geonames.org.
You can take a look at the script that outputs the json files in the World Geo Parser project https://github.com/gabrielclavero/world-geo-parser.
Both the World Geo Parser project and www.geonames.org content are licensed under a Creative Commons Attribution 3.0 License http://creativecommons.org/licenses/by/3.0/
You can get it from Bower
bower install gc-geo-fields
Load the script files in your application:
<script src="bower_components/gc-geo-fields/dist/geofields.js"></script>
Add the specific module to your dependencies:
angular.module('myApp', ['gc.geo.fields', ...])
Make sure you leave the json data folder and the template.html file in the same location than the geofields.js file.
Keep in mind after running the script on https://github.com/gabrielclavero/world-geo-parser, some of the states will have TONS of cities on it (up to 11k maybe) Maybe what you want instead are the second-order administrative divisions of each country. To do that, use the feature class 'A' and feature code 'ADM2' to gather the data on step 3 of the script.