ListView in ionicModal acting strange

In my app I am showing contacts in <ion-list> and upon clicking on an <ion-list> element, I am opening an ionicModal which shows the name and phone number of the the contact. Now, my code is this -


<script id="modal.html" type="text/ng-template">
    <ion-header-bar class ="bar-calm">
      <h1 class="title">My Modal title</h1>
      <button class="button" ng-click="closeModal()">Back</button>
    <ion-content padding="true" >

      <ion-list >
                <ion-item ng-repeat="nos in optionsPhoneNumber" >
                 <button class="button" ui-sref="home" ng-click="selectPhoneNumber($index)">

modal init:-

//init the modal
    $ionicModal.fromTemplateUrl('modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function (modal) {
      $scope.modal = modal;

Here optionPhoneNumber contains phone Numbers and it’s size may vary.

So when I run the app, and click on 1st contact, ionicModal opens but no <ion-list> is shown, all I get is Name and PhoneNumbers on <h1> and <h2> fields which I have added just for debugging process.
Now as PhoneNumbers are shown on <h2> fields and not on the <ion-list> even if same parameters are used to access them in both cases, I am confused what is causing this.

The strange part is, at a time, 4 contacts out of 300 appears on the screen so when I click on any contact except 2nd one, I am getting same output i.e. no list.
But on clicking the 2nd or first scrolling a little bit, then clicking anyone I am getting a list view but most of the time they remain same for different contacts.

Please help me fix this, I can post more code if needed.

Thank you.