Country/State Selection with AngularJS

<html data-ng-app="app">

    <head>
        <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body data-ng-controller="CountriesController">
      <select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
        <option value="">Select country</option>
      </select>
      <br>
          <select data-ng-model="state" data-ng-options="state.name for state in availableStates">
                <option value="">Select state</option>
          </select>
      <br> Country: {{country}} <br> State: {{state}}
    </body>

</html>

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

function CountriesController($scope)
{
    $scope.countries = [
    {
        "name": "USA",
        "id": 1
    },
    {
        "name": "Canada",
        "id": 2
    }];
    $scope.states = [
    {
        "name": "Alabama",
        "id": 1,
        "countryId": 1
    },
    {
        "name": "Alaska",
        "id": 2,
        "countryId": 1
    },
    {
        "name": "Arizona",
        "id": 3,
        "countryId": 1
    },
    {
        "name": "Alberta",
        "id": 4,
        "countryId": 2
    },
    {
        "name": "British columbia",
        "id": 5,
        "countryId": 2
    }];
    $scope.updateCountry = function ()
    {
        $scope.availableStates = [];
        angular.forEach($scope.states, function (value)
        {
            if (value.countryId == $scope.country.id)
            {
                $scope.availableStates.push(value);
            }
        });
    }
}