<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Angularjs/angular.js"></script>
<script src="Script/AngularjsBinding.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="country in
countries">
{{country.name}}
<ul>
<li ng-repeat="city in country.cities">
{{city.name}}
<ul>
<li ng-repeat="street in city.Area">
{{street.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
JS
///
<reference path="../Angularjs/angular.js" />
var app = angular.module("myApp", [])
.controller("myController", function ($scope) {
var countries = [
{
name: "India",
cities: [
{
name: "Mumbai", Area:
[
{ name:
"Tunga" },
{ name:
"Saki naka" },
{ name: "Powai" },
{ name:
"Hiranandani" },
]
},
{ name: "Chennai" },
{ name: "UP" }
]
},
{
name: "Australia",
cities: [
{ name: "Melbourne" },
{ name: "Perth" },
{ name: "Canberra" },
{ name: "Sydney" }
]
},
{
name: "England", cities: [
{ name: "London" },
{ name: "Menchester" },
{ name: "Bristol" },
{ name: "Birmingham" }
]
},
];
$scope.countries =
countries;
});
