Я хочу получить сложные данные JSON с помощью Angularjs

Question

Привет! Я пытаюсь создать опцию выбора третьего уровня, но не могу получить данные из json. Пожалуйста, помогите мне или исправьте меня, где я делаю ошибку

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.states = [{
      'Name': 'Oregon',
      'Population': 4093465,
      'Cities': [{
          'Name': 'Portland',
          'Population': 639863,
          'Area': [{
              'title': 'East Portland',
              'Population': 5000,
            },

            {
              'title': 'west Portland',
              'Population': 8000,
            },
            {
              'title': 'North Portland',
              'Population': 6000,
            },
            {
              'title': 'south Portland',
              'Population': 5000,
            }



          ]
        },
        {
          'Name': 'Salem',
          'Population': 167419,
          'Area': [{
              'title': 'East Salem',
              'Population': 5000,
            },
            {
              'title': 'West Salem',
              'Population': 6000,
            },
            {
              'title': 'North Salem',
              'Population': 8000,
            },
            {
              'title': 'South Salem',
              'Population': 10000,
            },
          ]

        }
      ]
    },
    {
      'Name': 'Washington',
      'Population': 7288000,
      'Cities': [{
          'Name': 'The Little Fishing Village',
          'Population': 704352,
          'Area': [{
              'title': 'East Little Fishing Village',
              'Population': 5000,
            },
            {
              'title': 'West Little Fishing Village',
              'Population': 6000,
            },
            {
              'Name': 'North Little Fishing Village',
              'Population': 8000,
            },
            {
              'title': 'South Little Fishing Village',
              'Population': 10000,
            },
          ]
        },
        {
          'Name': 'Vancouver',
          'Population': 174826,
          'Area': [{
              'title': 'East Vancouver',
              'Population': 12000,
            },
            {
              'title': 'West Vancouver',
              'Population': 18000,
            },
            {
              'title': 'North Vancouver',
              'Population': 25000,
            },
            {
              'title': 'South Vancouver',
              'Population': 35000,
            },
          ]
        }
      ]
    },
  ]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!-- Snippet -->

<div ng-app="myApp" ng-controller="myCtrl">
  <label for="name">Select a State:</label>
  <select id="name" ng-model="selectedName" ng-options="state as state.Name for state in states"></select>
  <br />
  <label for="region">Select a City:</label>
  <select id="region" ng-model="selectedCity" ng-options="item.Name for item in selectedName.Cities"></select>
  <label for="area">Select a Area:</label>
  <select id="area" ng-model="selectedAreaName" ng-options="title."></select>
  <br /><br />
  <p>{{selectedName.Name}}</p>
  <p>{{selectedName.Population}}</p>
  <p>{{selectedCity.Name}}</p>
  <p>{{selectedCity.Population}}</p>
  <p>{{selectedAreaName.title}}</p>
  <p>{{selectedAreaName.Population}}</p>

</div>

Answer 1

Попробуйте

  <select id="area" ng-model="selectedAreaName" ng-options="data.title for data in selectedCity.Area"></select>

Вот этот планер