Angular ui-select is not displaying the list of options when included in angular-ui-bootstrap modal

Question

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.

Answer 1

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>