Angular - Cascading dropdown behaviour for Single Select Box - angularjs

Question

Usually We do cascading Dropdown list with separate Select Box. Like below Image.
My requirement is quite different. I want to add only Single Select Box which will act as Cascading behaviour.
Simple Example process : (yourSelectBox - name of Select Box)
1) At First Instance It will show countries name in yourSelectBox
2) lets say , If you select/click India as Coutry,
3) now yourSelectBox should have States List like Maharashtra, Gujrat etc
4) If you select Maharashtra as your state,
5) how yourSelectBox should have City List.
6) finally you select your city.
Refer below image.
Can we flush values of yourSelectBox by keeping eye on event(using $watch on selected Value) ?

Answer 1

HTML
<select ng-mode="selcountry" ng-change="getStates();">
<option value="coutry.id" ng-repeat="coutry in countries"> {{coutry.name}}</option>
</select>
<select ng-mode="selstate" ng-change="getCities();">
<option value="state.id" ng-repeat="state in states"> {{state.name}}</option>
</select>
<select ng-mode="selcity" >
<option value="city.id" ng-repeat="city in cities"> {{city.name}}</option>
</select>
Controller :
$scope.getStates = function (){
//$scope.selcountry
//call get states where counties is $scope.selcountry
}
$scope.getStates = function (){
//$scope.selcountry
//call get states where counties is $scope.selcountry
$scope.states= result //set states to
}
$scope.getCities = function (){
//$scope.selstate
//call get states where counties is $scope.selstate
$scope.cities = result //set cities to
}
if you want the complete Login in Single Select Menu Then:
<select>
<optgroup label="India">
<optgroup label="Gujarat">
<option value="1">Gandhi Nagar</option>
<option value="2">Porubandar</option>
</optgroup>
<optgroup label="Delhi">
<option value="3">Delhi-6</option>
<option value="4">city</option>
</optgroup>
</optgroup>
</select>
Refer