<!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": ""
    }
]