Collection repeat list inside Ionic Pop Up - angularjs

Question

I have a collection repeat list with a search bar on top of the list (that is inside ionic pop up body). On the real device (Android 4.4), the list displays only 9 records.
I have a codepen created collection repeat inside ionic pop up. Here it displays all the records, but not on the actual device.
Recently I updated from Ionic 1.1.1 to Ionic 1.2.4 . Is it a problem because of the new Ionic version, I also tried Ionic 1.2.4's nightly build it also dint work.
Does the phone's browser version cause a difference, My phone's browser version is "Mozilla/5.0(Linux 4.4.2; en-us; 6043D Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) version/4.0 chrome/ 30.0.0 Mobile Safari/537.36."
Here is the HTML code of the ionic pop up.
<div class="list list-inset" ng-style="{ 'display': 'inline-flex', 'padding': '0'}">
<label class='item item-input' ng-style='{ 'border-right-color': '#FFFFFF'}'>
<i class='icon icon-left ion-ios7-search placeholder-icon''></i>
<input type='text' ng-model='search' placeholder='Search'>
</label>
<a class='button button-icon icon ion-ios7-close-empty placeholder-icon'
ng-style='{ 'color': '#B83E2C' }'
on-touch='clearSearch()''>
</a>
</div>
<div class='listPopUpHeight'>
<ion-scroll direction="y" class="available-scroller" style="height:350px">
<ion-list>
<ion-item
class="dataSourceItem"
collection-repeat="item in dataSource | filter:search"
collection-item-width="100%"
item-height="15%"
on-tap="tapped(item)">
{{item.Text}}
</ion-item>
</ion-list>
</ion-scroll>
</div>
Here is the JS code:
angular.module('ionicApp', ['ionic'])
.controller('PopupCtrl', function($scope, $ionicPopup, $timeout) {
$scope.dataSource = [];
$scope.showList = function(){
var list=[];
for (var i = 0; i < 1000; i++) {
list.push({ 'Id': i, 'Text': 'Text_' + i });
}
$scope.dataSource = list;
var listPopup = $ionicPopup.show({
templateUrl: 'popupTemplate.html',
title: 'List',
scope: $scope,
buttons: [
{ text: 'Cancel' },
]
});
};
});
Is there something I am missing out. Kindly do reply.
Thanks in advance :)

Answer 1

Please check below link. I made a popup with radio button with searchbar for Ionic v1.
https://codepen.io/engabdalb/pen/LYpWbZa
HTML
<a class="item" ng-click="open('aracyakit.html')">
Yakıt
<span style="color:#0097A4" style="color:#0097A4" class="item-note" >
{{arackayit.araba_yakit}}
</span>
</a>
<script id='aracyakit.html' type='text/ng-template'>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="arama" placeholder="Arama">
</label>
<ion-radio name="araba_yakit" id="araba_yakit" ng-repeat="ay in arabayakitlari | filter:arama" class="wrapping-list" ng-model="arackayit.araba_yakit" ng-value="'{{ay.value}}'">{{ay.name}}</ion-radio>
</script>
<a class="item" ng-click="open('aracvites.html')">
Vites
<span style="color:#0097A4" style="color:#0097A4" class="item-note" >
{{arackayit.araba_vites}}
</span>
</a>
<script id='aracvites.html' type='text/ng-template'>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="arama" placeholder="Arama">
</label>
<ion-radio name="araba_vites" id="araba_vites" ng-repeat="av in arabavitesleri | filter:arama" class="wrapping-list" ng-model="arackayit.araba_vites" ng-value="'{{av.value}}'">{{av.name}}</ion-radio>
</script>
CSS
.popup-body {
padding: 10px;
overflow: auto;
width: 100%;
}
.popup-open .popup-backdrop,
.popup-open .popup {
pointer-events: auto;
width: 100%;
}
.popup-head {
padding: 0px 0px;
border-bottom: 1px solid #eee;
text-align: center;
}
JS
$scope.arackayit = [];
$scope.arabavitesleri = [
{ value: "Otomatik", name: "Otomatik" },
{ value: "Manuel", name: "Manuel" }
]
$scope.arabayakitlari = [
{ value: "Dizel", name: "Dizel" },
{ value: "Benzin", name: "Benzin" },
{ value: "Benzin-LPG", name: "Benzin-LPG" }
]
$scope.open = function(clicked) {
$ionicPopup.confirm({
templateUrl: clicked,
scope: $scope,
buttons: [{
text: 'Iptal',
type: 'button-default',
onTap: function(e) {
// Change/ write here current page
$state.go('tab.aracekle');
}
}, {
text: 'Tamam',
type: 'button-positive',
onTap: function(e) {
//open next when OK clicked
switch (clicked) {
case 'aracyakit.html':
$scope.open('aracvites.html');
break;
//Do nothing when OK clicked
case 'aracvites.html':
default:
// code block
}
}
}]
});
}