how to show or hide list in while typing in text field?

http://codepen.io/anon/pen/ZGEpMN

hello I am trying to make auto complete in ionic using angularjs.I am able to make auto complete but I found some issue .I need to display my filter list when user type on input field .In other words Currently my list is display every time.I need to display my list when I type anything on text field .And when I remove all text from text field it should again hide .could you please tell me how I will achieve this thing

here is my code 

 <div class="listcontainer">
        <li class="item" ng-repeat="station in data.data | filter:station.stationCode:startsWith">{{station.stationName+"-("+station.stationCode+")"}}</li>
    </div>

http://codepen.io/anon/pen/ZGEpMN

secondly : why my list is not scrolling ? when i touch up and touchdown it is not scrolling /?

.listcontainer{
  border :1px solid blue;
  height:150px;
  overflow:auto;
}

Thanks

Just change

<div class="listcontainer">

to

<div class="listcontainer" ng-show="station.stationCode.length">

This will result in angular hiding your complete div.listcontainer when length of your above defined model is false (zero).

Use a html select element with ng-options to show your suggestions. When you jhavent typed anything the list of suggestions is empty, and selectbox closed. As soon as you start typing and suggestions arrive from backend then the selectbox will open and show your suggestions. Something like this:

<select ng-options="station in data.data | filter:station.stationCode:startsWith">

Note: when using

  • items surround them with or