Make data list visible only when user type in search field

I am new to ionic frame work and javascript have some problems to create functionality to my first app. I am studding this course Building Aapp with Angular.js. I want to explore more and add some functionality to this test app just for practice. Here is example of this app Example 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. 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.

you can access your ng-model in the controller without the jquery, just use

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