在Angular.js中使用Cookie填充选择的依赖下拉列表

Question

I have built a three tier dependent dropdown in Angular, but I am having trouble populating the values with the saved cookies. Sometimes, all three will populate correctly, and sometimes they just show as a blank string, even 1 or 2 will just populate but not the third. In the HTML code, I have exposed the model in the paragraph tags, so I know the values are being retrieved from cookies, but they are not displaying in the select dropdown. Please forgive any minor errors below.

Controller :

        angular.module("CountryApp").controller("filterController", ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies)
        {
            // Getting cookies and trying to assign to models
            $scope.loadCookies = function() {
                var cityCookie = JSON.parse($cookies.get('country'));
                if (cityCookie == null) {
                    return;
                } else {
                    $scope.selectedCountry = JSON.parse($cookies.get('country'));
                    $scope.selectedState = JSON.parse($cookies.get('state'));
                    $scope.selectedCity = cityCookie;
                }
            };

            // When save button is clicked...
            $scope.changedValue = function(country, state, city) {
              $scope.selectedCountry = country;
              $scope.selectedState = state;
              $scope.selectedCity = city;
              // Add to cookies
              $cookies.put('country', JSON.stringify(country));
              $cookies.put('state', JSON.stringify(state));
              $cookies.put('city', JSON.stringify(city));
            };

            $scope.list = [
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Cleveland' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Columbus' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Cincinnati' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Akron' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'Los Angeles' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'San Diego' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'San Francisco' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'Santa Monica' },
              { 'COUNTRY': 'Canada', 'STATE': 'Alberta', 'CITY': 'Edmonton' },
              { 'COUNTRY': 'Canada', 'STATE': 'Alberta', 'CITY': 'Calgary' },
              { 'COUNTRY': 'Canada', 'STATE': 'British Columbia', 'CITY': 'Victoria' },
               { 'COUNTRY': 'Canada', 'STATE': 'British Columbia', 'CITY': 'Vancouver' },
            ];
         }]);

         // Custom filter to only return uniques. I put it here just for readability on stackoverflow
         app.filter('unique', function() {
            return function(collection, keyname) {
              // we define our output and keys array;
              var output = [],
                  keys = [];

              angular.forEach(collection, function(item) {
                  var key = item[keyname];
                  if(keys.indexOf(key) === -1) {
                      keys.push(key);
                      output.push(item);
                  }
              });
              return output;
           };
        });

HTML:

<div class="form-group" ng-init="loadCookies()">
            <div ng-app="CountryApp">
            <select class="form-control" id="country" ng-model="selectedCountry" ng-options="option.COUNTRY for option in list | unique:'COUNTRY'">
              <option value="" disabled selected>Country</option>
            </select>

            <select class="form-control" id="state" name="state" ng-model="selectedState" ng-disabled="!selectedCountry" ng-options="option.STATE for option in list | unique: 'STATE' | filter: { COUNTRY: selectedCountry.COUNTRY }">
                <option value="" disabled selected>State</option>
            </select>

            <select class="form-control" id="city" name="city" 
              ng-model="selectedCity" ng-disabled="!selectedArea" 
              ng-options="option.CITY for option in list | unique: 'CITY' |     filter: {STATE: selectedState.STATE, COUNTRY: selectedCountry.COUNTRY}">
              <option value="" disabled selected>City</option>
            </select>


              <p>Selected Country: {{ selectedCountry }} </p>
              <p>Selected State: {{ selectedState }}</p>
              <p>Selected City: {{ selectedCity }}</p>
            </div>
            </div>

Answer 1

Solution! Angular didn't like retrieving and setting the cookies with temporary javascript variables. If we switch them to $scope variables, it works great. I also broke it out into a loadCookies function, and assignCookies function.

$scope.loadCookies = function() {
    $scope.countryCookie = JSON.parse($cookies.get('country'));
    $scope.stateCookie = JSON.parse($cookies.get('state'));
    $scope.cityCookie = JSON.parse($cookies.get('city'));
};

$scope.assignCookies = function() {
    console.log("assigning");
    if ($scope.cityCookie == null) {
        return;
    } else {
        $scope.selectedCountry = $scope.countryCookie;
        $scope.selectedState = $scope.stateCookie;
        $scope.selectedCity = $scope.cityCookie;
    };
};