AngularJS dropdown doesn't work when opened inside of dialog box - angularjs

Question

I am using AngularJS dropdown list and it works without problem. But it doesn't show me the results when i want to open it inside of dialog box. What could be the reason of this?

Answer 1

Here is the script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function CountryStateCityCtnl($scope) {
$scope.countries = {
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
$scope.GetSelectedCountry = function () {
$scope.strCountry = document.getElementById("country").value;
};
$scope.GetSelectedState = function () {
$scope.strState = document.getElementById("state").value;
};
}
</script>
Here is the some part of view:
<div ng-controller="CountryStateCityCtnl">
<table style="border:none; width:100%;">
<tbody>
<tr>
<th><font color="#656565">Yeni Üye</font> </th>
</tr>
<tr>
<td align="right"><label for="UserName">İsim:</label></td>
<td><input type="text" name="UserName" id="UserName" /></td>
</tr>
<tr>
<td align="right" ><label for="UserSurname">Soyisim:</label></td>
<td><input type="text" name="UserSurname" id="UserSurname" /></td>
<tr>
<td align="right"><b>Şehir:</b></td>
<td>
<select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"><option value=''>Select</option></select>
<label >Bayi:</label>
<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"><option value=''>Select</option></select>
</td>
</tr>
<tr>
<td align="right" ><label for="UserMail">E-Mail:</label></td>
<td>
<input type="email" name="UserMail" id="UserMail" />
<select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>Select</option><option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option></select>
</td>
</tr>
<tr>
<td align="right"><label for="UserPassword">Şifre:</label></td>
<td><input type="password" name="UserPassword" id="UserPassword" /></td>
</tr>
<tr>
<td align="right"><label for="ConfirmPassword">Şifre(Tekrar):</label></td>
<td><input type="password" name="ConfirmPassword" id="ConfirmPassword" /></td>
</tr>
<tr>
<td><input type="submit" value="Üyeliğimi Tamamla" /></td>
</tr>
</tbody>
</table>
</div>

Answer 2

Depending on what Dialog box implementation you are using, its very likely that your drop-down is hidden underneath your dialog box. Some drop-down implementations also like to show the drop-down as a separate div (kendo ui for example). To debug this you could set the background of your dialog to transparent using Chrome's inspector. If you can see your drop-down under the dialog, try to create CSS style to apply to the drop-down that will be above the dialog. eg:
myitem {
z-index: 999;
}

Answer 3

Here is the picture of dropdown list without dialog without Dialog
Here is the picture of dropdown list with Dialog