Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-app="Aplic" ng-controller="CountryCntrl">
        <select id="country" ng-model="states" ng-options="country for (country, states) in countries">
            <option value=''>Choose</option>
        </select>Departement:
        <select id="state" ng-disabled="!states">
            <option value="">Choose</option>
            <option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
        </select>
    </div>
    
    
  </body>

</html>

// Code goes here

 var Aplic = angular.module("Aplic", []);

 Aplic.controller('CountryCntrl', function ($scope) {
     $scope.countries = {
         'Aquitaine': [{
             'id': '22',
             'dep': "Dordogne"
         }, {
             'id': '31',
             'dep': "Gironde"
         }],
             'Auvergne': [{
             'id': '3',
             'dep': "Allier"
         }, {
             'id': '15',
             'dep': "Cantal"
         }]
     };
 });

/* Styles go here */