var app = angular.module('plunker', ['App.services']);
app.controller('MainCtrl', function($scope, mainAPIservice) {
$scope.dataList = [];
mainAPIservice.getData().success(function (response) {
$scope.dataList = response;
})
});
var app = angular.module('App.services', []);
app.factory('mainAPIservice', function($http) {
var mainAPI = {};
mainAPI.getData = function() {
return $http({
method: 'GET',
url: 'data.json?callback=JSON_CALLBACK'
});
}
return mainAPI;
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-4" style="border-right:1px solid #e4e4e4;">
<h4>Target Audience</h4>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Region:</label>
<select id="region" class="form-control" ng-model="cities" ng-options="region for (region, cities) in dataList">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">City:</label>
<select id="city" class="form-control" ng-disabled="!cities" ng-model="resellers" ng-options="city for (city, resellers) in cities">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Reseller:</label>
<select id="reseller" class="form-control" ng-disabled="!cities || !resellers" ng-model="stores" ng-options="reseller for (reseller, stores) in resellers">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Store:</label>
<select id="store" class="form-control" ng-disabled="!cities || !resellers || !stores" ng-model="salesTeams" ng-options="store for (store, salesTeams) in stores">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Sales Team:</label>
<select id="salesTeam" class="form-control" ng-disabled="!cities || !resellers || !stores || !salesTeams" ng-model="dealers" ng-options="salesTeam for salesTeam in salesTeams">
<option value=''>Select</option>
</select>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */
{
"North":{
"Delhi":{
"Delhi R1":{
"Delhi R1 S1":[
"Delhi R1 S1 ST1",
"Delhi R1 S1 ST2",
"Delhi R1 S1 ST3",
"Delhi R1 S1 ST4"
],
"Delhi R1 S2":[
"Delhi R1 S2 ST1",
"Delhi R1 S2 ST2",
"Delhi R1 S2 ST3",
"Delhi R1 S2 ST4"
],
"Delhi R1 S3":[
"Delhi R1 S3 ST1",
"Delhi R1 S3 ST2",
"Delhi R1 S3 ST3",
"Delhi R1 S3 ST4"
]
},
"Delhi R2":{
"Delhi R2 S1":[
"Delhi R2 S1 ST1",
"Delhi R2 S1 ST2",
"Delhi R2 S1 ST3",
"Delhi R2 S1 ST4"
],
"Delhi R2 S2":[
"Delhi R2 S2 ST1",
"Delhi R2 S2 ST2",
"Delhi R2 S2 ST3",
"Delhi R2 S2 ST4"
],
"Delhi R2 S3":[
"Delhi R2 S3 ST1",
"Delhi R2 S3 ST2",
"Delhi R2 S3 ST3",
"Delhi R2 S3 ST4"
]
},
"Delhi R3":{
"Delhi R3 S1":[
"Delhi R3 S1 ST1",
"Delhi R3 S1 ST2",
"Delhi R3 S1 ST3",
"Delhi R3 S1 ST4"
],
"Delhi R3 S2":[
"Delhi R3 S2 ST1",
"Delhi R3 S2 ST2",
"Delhi R3 S2 ST3",
"Delhi R3 S2 ST4"
],
"Delhi R3 S3":[
"Delhi R3 S3 ST1",
"Delhi R3 S3 ST2",
"Delhi R3 S3 ST3",
"Delhi R3 S3 ST4"
]
}
},
"Jaipur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Lucknow":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Kanpur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
},
"West":{
"Mumbai":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Ahmedabad":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Pune":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Nagpur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
},
"South":{
"Bengaluru":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Hyderabad":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Chennai":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Kochi":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
}
}