<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="testController">
<h1>AngularJS Boostrap Drop Down Demo</h1>
<h2>Most common countries come first.</h2>
<p>{{ status }}</p>
<div class="dropdown">
<a class="btn btn-default" data-toggle="dropdown" href="#">{{ country }} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCountry">
<li ng-repeat="country in data.countriesFirst">
<a>{{country}}</a>
</li>
<li role="presentation" class="divider"></li>
<li ng-repeat="country in data.locations.countries | orderBy:'country'">
<a>{{country.country}}</a>
</li>
</ul>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap']);
var testController = ['$scope', '$http',
function($scope, $http) {
$scope.status = 'loading...';
$scope.country = "Select Country";
$scope.data = {
"locations": {}
};
//countries appearing first in the drop down
$scope.data.countriesFirst = [
"USA",
"United Kingdom",
"India"
];
//load JSON data
$http.get('countries.json')
.then(function(res) {
$scope.data.locations.countries = res.data;
$scope.status = "loaded " + $scope.data.locations.countries.length + " countries.";
$scope.$apply();
});
}
];
[
{
"country": "China",
"Capital": "Beijing",
"area": "9598094",
"population": "1338390000",
"latitude": "33.578",
"longitude": "103.887",
"viewpoint": "2",
"hex_colour": "745aa6"
},
{
"country": "India",
"Capital": "New Delhi",
"area": "3287260",
"population": "1182825000",
"latitude": "22.9179",
"longitude": "78.9258",
"viewpoint": "3",
"hex_colour": "5dcae9"
},
{
"country": "USA",
"Capital": "Washington",
"area": "9629090",
"population": "309628000",
"latitude": "39.7748",
"longitude": "-99.1406",
"viewpoint": "2",
"hex_colour": "4ab5e7"
},
{
"country": "Indonesia",
"Capital": "Jakarta",
"area": "1904570",
"population": "231369500",
"latitude": "-3.68886",
"longitude": "121.333",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Brazil",
"Capital": "BrasÃlia",
"area": "8514880",
"population": "193155000",
"latitude": "-9.62241",
"longitude": "-56.4258",
"viewpoint": "2",
"hex_colour": "fdba3f"
},
{
"country": "Russia",
"Capital": "Moscow",
"area": "17098200",
"population": "141927297",
"latitude": "61.524",
"longitude": "105.319",
"viewpoint": "2",
"hex_colour": "ffca3e"
},
{
"country": "Japan",
"Capital": "Tokyo",
"area": "377873",
"population": "127360000",
"latitude": "37.0201",
"longitude": "135.879",
"viewpoint": "4",
"hex_colour": ""
},
{
"country": "Mexico",
"Capital": "Mexico City",
"area": "1958200",
"population": "107550697",
"latitude": "23.8858",
"longitude": "-102.832",
"viewpoint": "3",
"hex_colour": "bd60a5"
},
{
"country": "Philippines",
"Capital": "Manila",
"area": "300000",
"population": "92226600",
"latitude": "12.5546",
"longitude": "122.607",
"viewpoint": "4",
"hex_colour": ""
},
{
"country": "Germany",
"Capital": "Berlin",
"area": "357022",
"population": "81757600",
"latitude": "50.903",
"longitude": "10.1953",
"viewpoint": "4",
"hex_colour": "89aa9c"
},
{
"country": "Egypt",
"Capital": "Cairo",
"area": "980869",
"population": "78658000",
"latitude": "26.4312",
"longitude": "29.5313",
"viewpoint": "3",
"hex_colour": "b86e11"
},
{
"country": "Turkey",
"Capital": "Ankara",
"area": "783562",
"population": "72561312",
"latitude": "38.9637",
"longitude": "35.2433",
"viewpoint": "4",
"hex_colour": "87a0d3"
},
{
"country": "France",
"Capital": "Paris",
"area": "551500",
"population": "65447374",
"latitude": "46.77",
"longitude": "2.24121",
"viewpoint": "4",
"hex_colour": "da4398"
},
{
"country": "Thailand",
"Capital": "Bangkok",
"area": "513115",
"population": "63525062",
"latitude": "15.87",
"longitude": "100.993",
"viewpoint": "4",
"hex_colour": "226b2d"
},
{
"country": "United Kingdom",
"Capital": "London",
"area": "242900",
"population": "62041708",
"latitude": "54.1882",
"longitude": "-3.25195",
"viewpoint": "4",
"hex_colour": "ff3333"
},
{
"country": "Italy",
"Capital": "Rome",
"area": "301318",
"population": "60340328",
"latitude": "42.2285",
"longitude": "13.1836",
"viewpoint": "4",
"hex_colour": ""
},
{
"country": "South Korea",
"Capital": "Seoul",
"area": "99538",
"population": "49773145",
"latitude": "36.6332",
"longitude": "128.101",
"viewpoint": "5",
"hex_colour": "bd519e"
},
{
"country": "South Africa",
"Capital": "Pretoria",
"area": "1221040",
"population": "49320500",
"latitude": "-28.5363",
"longitude": "23.5547",
"viewpoint": "3",
"hex_colour": "FFFF33"
},
{
"country": "Spain",
"Capital": "Madrid",
"area": "505992",
"population": "46951532",
"latitude": "40.1117",
"longitude": "-3.99902",
"viewpoint": "4",
"hex_colour": "658616"
},
{
"country": "Ukraine",
"Capital": "Kiev (Kyiv)",
"area": "603700",
"population": "45962900",
"latitude": "48.3794",
"longitude": "31.1656",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Argentina",
"Capital": "Buenos Aires",
"area": "2780400",
"population": "40134425",
"latitude": "-34.597",
"longitude": "-65.7422",
"viewpoint": "2",
"hex_colour": "dd5a26"
},
{
"country": "Poland",
"Capital": "Warsaw",
"area": "312685",
"population": "38167329",
"latitude": "52.3219",
"longitude": "18.8086",
"viewpoint": "5",
"hex_colour": "056347"
},
{
"country": "Algeria",
"Capital": "Algiers",
"area": "2381740",
"population": "34895000",
"latitude": "28.3044",
"longitude": "1.93359",
"viewpoint": "3",
"hex_colour": "026ea0"
},
{
"country": "Canada",
"Capital": "Ottawa",
"area": "9970610",
"population": "34157000",
"latitude": "56.17",
"longitude": "-106.172",
"viewpoint": "2",
"hex_colour": "4755a5"
},
{
"country": "Morocco",
"Capital": "Rabat",
"area": "446550",
"population": "31852000",
"latitude": "31.9894",
"longitude": "-6.81152",
"viewpoint": "3",
"hex_colour": "ff6633"
},
{
"country": "Iraq",
"Capital": "Baghdad",
"area": "438",
"population": "30747000",
"latitude": "33.4681",
"longitude": "43.1982",
"viewpoint": "3",
"hex_colour": "115627"
},
{
"country": "Malaysia",
"Capital": "Kuala Lumpur",
"area": "329847",
"population": "28306700",
"latitude": "4.08345",
"longitude": "101.821",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Saudi Arabia",
"Capital": "Riyadh",
"area": "2149690",
"population": "25721000",
"latitude": "24.3671",
"longitude": "44.5605",
"viewpoint": "3",
"hex_colour": "aed136"
},
{
"country": "Australia",
"Capital": "Canberra",
"area": "7741220",
"population": "22403924",
"latitude": "-25.6415",
"longitude": "133.945",
"viewpoint": "3",
"hex_colour": "fdb913"
},
{
"country": "Chile",
"Capital": "Santiago",
"area": "756096",
"population": "17095000",
"latitude": "-26.5885",
"longitude": "-70.4883",
"viewpoint": "3",
"hex_colour": "dd2726"
},
{
"country": "Netherlands",
"Capital": "Amsterdam",
"area": "41528",
"population": "16620900",
"latitude": "51.8629",
"longitude": "5.84473",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Belgium",
"Capital": "Brussels",
"area": "32545",
"population": "10827519",
"latitude": "50.792",
"longitude": "4.61426",
"viewpoint": "5",
"hex_colour": "add9b4"
},
{
"country": "Portugal",
"Capital": "Lisbon",
"area": "91982",
"population": "10636888",
"latitude": "39.3999",
"longitude": "-8.22445",
"viewpoint": "5",
"hex_colour": "feee07"
},
{
"country": "Hungary",
"Capital": "Budapest",
"area": "93032",
"population": "10013628",
"latitude": "47.1625",
"longitude": "19.5033",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Sweden",
"Capital": "Stockholm",
"area": "449964",
"population": "9359742",
"latitude": "63.5681",
"longitude": "16.6992",
"viewpoint": "3",
"hex_colour": "476344"
},
{
"country": "Switzerland",
"Capital": "Bern",
"area": "41284",
"population": "7782900",
"latitude": "46.8182",
"longitude": "8.22751",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Hong Kong",
"Capital": "Central Hong Kong",
"area": "1104",
"population": "7026400",
"latitude": "22.5937",
"longitude": "114.082",
"viewpoint": "4",
"hex_colour": ""
},
{
"country": "Libya",
"Capital": "Tripoli",
"area": "1759540",
"population": "6420000",
"latitude": "27.2546",
"longitude": "17.71",
"viewpoint": "3",
"hex_colour": "23803f"
},
{
"country": "Denmark",
"Capital": "Copenhagen",
"area": "43094",
"population": "5540241",
"latitude": "55.5783",
"longitude": "9.75586",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Finland",
"Capital": "Helsinki",
"area": "338145",
"population": "5363200",
"latitude": "63.86",
"longitude": "26.2793",
"viewpoint": "3",
"hex_colour": "4274b9"
},
{
"country": "Norway",
"Capital": "Oslo",
"area": "385155",
"population": "4889300",
"latitude": "61.4808",
"longitude": "8.87695",
"viewpoint": "4",
"hex_colour": "b86e11"
},
{
"country": "Ireland",
"Capital": "Dublin",
"area": "70273",
"population": "4425675",
"latitude": "53.4129",
"longitude": "-8.24389",
"viewpoint": "5",
"hex_colour": "009933"
},
{
"country": "New Zealand",
"Capital": "Wellington",
"area": "270534",
"population": "4376600",
"latitude": "-40.9006",
"longitude": "174.886",
"viewpoint": "4",
"hex_colour": "333366"
},
{
"country": "Austria",
"Capital": "Vienna",
"area": "0",
"population": "1800000",
"latitude": "47.5162",
"longitude": "14.5501",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Estonia",
"Capital": "Tallinn",
"area": "45227",
"population": "1340000",
"latitude": "58.5052",
"longitude": "25.73",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Bangladesh",
"Capital": "Dhaka",
"area": "147570",
"population": "162221000",
"latitude": "23.685",
"longitude": "90.3563",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Belarus",
"Capital": "Minsk",
"area": "207595",
"population": "9648533",
"latitude": "53.7098",
"longitude": "27.9534",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Trinidad And Tobago",
"Capital": "Port Of Spain",
"area": "5131",
"population": "1299953",
"latitude": "10.3365",
"longitude": "-61.2597",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Pakistan",
"Capital": "Islamabad",
"area": "796095",
"population": "170600000",
"latitude": "29.9549",
"longitude": "69.0381",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Uruguay",
"Capital": "Montevideo",
"area": "176215",
"population": "3494382",
"latitude": "-32.5228",
"longitude": "-55.7658",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Sri Lanka",
"Capital": "Sri Jayawardenapura Kotte",
"area": "65610",
"population": "20238000",
"latitude": "7.55855",
"longitude": "80.7935",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Singapore",
"Capital": "Singapore",
"area": "710",
"population": "4987600",
"latitude": "1.42807",
"longitude": "103.689",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Romania",
"Capital": "Bucharest",
"area": "238391",
"population": "22215421",
"latitude": "45.8135",
"longitude": "25.0708",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Mauritius",
"Capital": "Port Louis",
"area": "2040",
"population": "1288000",
"latitude": "-20.3034",
"longitude": "57.7441",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Mongolia",
"Capital": "Ulan Bator",
"area": "1564115",
"population": "2736800",
"latitude": "46.8625",
"longitude": "103.847",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Kazakhstan",
"Capital": "Astana",
"area": "2724900",
"population": "16196800",
"latitude": "48.5748",
"longitude": "66.9727",
"viewpoint": "3",
"hex_colour": ""
},
{
"country": "Jamaica",
"Capital": "Kingston",
"area": "10991",
"population": "2847232",
"latitude": "18.2085",
"longitude": "-77.3877",
"viewpoint": "6",
"hex_colour": ""
},
{
"country": "Iran",
"Capital": "Tehran",
"area": "1648195",
"population": "74196000",
"latitude": "32.6949",
"longitude": "53.7891",
"viewpoint": "3",
"hex_colour": ""
},
{
"country": "Greece",
"Capital": "Athens",
"area": "131990",
"population": "11295002",
"latitude": "39.096",
"longitude": "22.1484",
"viewpoint": "4",
"hex_colour": ""
},
{
"country": "Uganda",
"Capital": "Kampala",
"area": "236040",
"population": "32369558",
"latitude": "1.37333",
"longitude": "32.2903",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Lithuania",
"Capital": "Vilnius",
"area": "65200",
"population": "3281000",
"latitude": "55.1694",
"longitude": "23.8813",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Nigeria",
"Capital": "Abuja",
"area": "923768",
"population": "158259000",
"latitude": "9.082",
"longitude": "8.67528",
"viewpoint": "5",
"hex_colour": ""
},
{
"country": "Jordan",
"Capital": "Amman",
"area": "92300",
"population": "6407085",
"latitude": "30.5852",
"longitude": "36.2384",
"viewpoint": "5",
"hex_colour": ""
}
]