AngularJS - show popup card-list? - angularjs

Question

I'm using Ionic framework to develop an app and have a view as the image shown below and I want a popup card-list to appear when the user taps on the textfields Account No: and Destination A/C:, the card-list is to be populated using a call to a web-service.
I'm a newbie to AngularJS and would appreciate if you could help me out with a basic example to get this done.
http://i.stack.imgur.com/Oh4n6.png
fundtransfer.html
<div class="list" ng-controller="PostsCtrl">
<div class="panel-heading">
<h3 class="panel-title">
Fund Transfer
</h3>
</div>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Account No:</span>
<input type="text" id="accNo" name="accNo" ng-model="accNo" ng-model-options="{updateOn: 'blur'}" placeholder="Account No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Destination A/C:</span>
<input type="text" id="desAccNo" name="desAccNo" ng-model="desAccNo" ng-model-options="{updateOn: 'blur'}" placeholder="Destination A/C:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Amount</span>
<input type="text" id="amount" name="amount" ng-model="amount" ng-model-options="{updateOn: 'blur'}" placeholder="Amount:">
</label>
</div>
<a class="btn btn-primary btn-block" ng-click="submit()">Transfer</a>
</div>

Answer 1

You could use the Ionic modal component, and override the CSS to resize if you don't want it to be full screen. It just takes a little CSS to resize the modal window, and then you can put the card component inside of the modal.
Markup
<ion-modal-view class="modal slide-in-up ng-enter active ng-enter-active">
<ion-content>
<div class="card">
...
</div>
</ion-content>
</ion-modal-view>
CSS
.modal {
width: 80%;
top: 20%;
left: 10%;
min-height: 60%;
background: none;
}