I am facing an issue with the anular-ui-bootstrap modal directive. Am using the angular's ui-select component in my app as a replacement for the html select. This ui-select is working fine in any page it is being included. But when i tried to include it in a modal pop up(using ui-bootstrap $modal service), the drop-down is not displaying the options
The issue is reproduced here
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.addresses = [{
"id":1,
"name": "chennai"
}, {
"id":2,
"name": "banglore"
}, {
"id":3,
"name": "madurai"
}];
});
<div class="modal-body">
City
<ui-select ng-model="selAddress">
<ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index" refresh-delay="0">
<div ng-bind-html="address.a | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
Selected: <b>{{ selAddress }}</b>
</div>
Any help would be much appreciated. Thanks in advance.
Thanks for all your responses for my question. Actually i was trying a lot to fix this issue for long and finally i myself figured out that it is somewere an issue with AngularJS i guess. Yes, i was able to fix this by just updating the version of AngularJS from 1.2.16 to 1.2.20. And the working link is here
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>
and also a minor fix of below
<div ng-bind-html="address.a | highlight: $select.search"></div>
to
<div ng-bind-html="address.name | highlight: $select.search"></div>