Ionic Collection repeat height issue - html

Question

I am building an application that uses collection-repeat however it asks me to provide the item height as it cannot calculate it. It cannot calculate it as the list isn't visible when the page is loaded, is there a way to set a dynamic height that is responsive as the current method i am using is not responsive.
Html code
<ion-list ng-show="query[queryBy]">
<!-- Creates each item through collection-repeat and is filtered by the query linked to the search field -->
<!-- ng-click opens the modal that will have the enlarged office address and the map of the office -->
<ion-item class="item-text-wrap item-icon-right" id="output" collection-repeat="office in offices|filter:query" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);" collection-item-height="getItemHeight(office, office.$index)" collection-item-width="100%">
<!-- Outputs all the data from offices.json -->
<h3 id="LocName">{{office.LocationName}}</h3>
<p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<!-- Creates the favourite icon on each list item, when the star is clicked the togglefav function is run -->
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
Height Control
$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return (index % 2) === 0 ? 50 : 60;
};