Make List visible only when user type in search field

tutorials
1

Hello everyone. I am new to ionic frame work and javascript have some problems to create functionality to my first app.
I am studding this course http://www.lynda.com/AngularJS-tutorials/Implementing-pull-refresh/368920/386124-4.html?autoplay=true. I want to explore more and add some functionality to this test app just for practice. Here is example of this app http://atozcognac.com/Contact_app/www/#/tab/list
Right now all list data is pre-loaded. I want tochange it so data would load only when user starts type in a search field. My pseudo code is . IF search field !empty and query match LOAD data.

list.html

<ion-view view-title="Artist List">
  <ion-nav-buttons side="primary">
    <button 
      class="button button-icon ion-minus-circled"
      ng-click="data.showDelete = !data.showDelete; data.showReorder = false;">
    </button>
  </ion-nav-buttons>
  
  <ion-nav-buttons side="secondary">
    <button 
      class="button button-icon ion-navicon"
      ng-click="data.showReorder = !data.showReorder; data.showDelete = false;">
    </button>
  </ion-nav-buttons>

<div class="bar bar-subheader 
  item-input-inset bar-light">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" ng-model="query" placeholder="Search">
  </label>
</div>

<ion-content 
  class="has-subheader">
  <ion-refresher on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list 
    show-delete="data.showDelete"
    show-reorder="data.showReorder">
    <ion-item ng-class="{'star': item.star}" 
    ng-repeat='item in artists | filter: query'
    class="item-thumbnail-left item-icon-right
      item-text-wrap" href="#/tab/list/{{item.shortname}}">
      <img ng-src="img/{{item.shortname}}_tn.jpg"
        alt="{{ item.name }} Photo">
      <h2>{{item.name}}</h2>
      <h3>{{item.reknown}}</h3>
      <p>{{item.bio | limitTo: 100}}
      {{ item.bio.length > 150 ? '&hellip;' : '' }}</p>
      <button class="button button-clear icon ion-star button-assertive"
        ng-click="toggleStar(item)"
        ng-show="item.star"></button>
      <ion-option-button class="button-dark"
        ng-click="toggleStar(item)">
        <i class="icon ion-star"></i>
      </ion-option-button>
      <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)">
      </ion-delete-button>
      <ion-reorder-button class="ion-navicon"
        on-reorder="moveItem(item, $fromIndex, $toIndex)">
      </ion-reorder-button>
    </ion-item>
  </ion-list>
</ion-content>
</ion-view>

app.js

 // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)

  });
})
.controller('ListController', ['$scope', '$http', '$state',
    function($scope, $http, $state) {
    $http.get('js/data.json').success(function(data) {
      $scope.artists = data.artists;
      $scope.whichartist=$state.params.aId;
      $scope.data = { showDelete: false, showReorder: false };

      $scope.onItemDelete = function(item) {
        $scope.artists.splice($scope.artists.indexOf(item), 1);
      }

      $scope.doRefresh =function() {
      $http.get('js/data.json').success(function(data) {
          $scope.artists= data.artists;
          $scope.$broadcast('scroll.refreshComplete');
        });
      }

      $scope.toggleStar = function(item) {
        item.star = !item.star;
      }

      $scope.moveItem = function(item, fromIndex, toIndex) {
        $scope.artists.splice(fromIndex, 1);
        $scope.artists.splice(toIndex, 0, item);
      };
    });
}]);

Thank you for your time

2

So I tried couple things like added id=“search” to my input

<label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input id="search" type="search" ng-model="query" placeholder="Search">
  </label>

and checking input field and I tried two different ways:
1)

.controller('ListController', ['$scope', '$http', '$state',
              function($scope, $http, $state) {
                   var query = document.getElementById('search');
                 if(query.value.length > 0) {
                        $http.get('js/data.json').success(function(data) {        
                     $scope.artists = data.artists;
              });
          };
    }]);

This one looks like don’t break my code, meaning my header (title, menu and delete buttons) are visible. When I type in search field the data is not showing.
2)

 .controller('ListController', ['$scope', '$http', '$state', '$query',
                  function($scope, $http, $state, $query) {
                     if(query.value.length > 0) {
                            $http.get('js/data.json').success(function(data) {        
                         $scope.artists = data.artists;
                  });
              };
        }]);

This example looks like braking my code my header is not visible any more it looks like it does not like that I am passing new parameter $query.
If some one could point me what I am doing wrong would really appreciate .
Thank you for your time.

3

Solution is here