title: Make data list visible only when user type in search field
body: <p>I am new to ionic frame work and javascript have some problems to create functionality to my first app.
  I am studding this course <a href="http://www.lynda.com/AngularJS-tutorials/Building-Mobile-App-AngularJS-Ionic/368920-2.html" rel="nofollow">Building Aapp with Angular.js</a>. I want to explore more and add some functionality to this test app just for practice. Here is example of this app <a href="http://atozcognac.com/Contact_app/www/#/tab/list" rel="nofollow">Example</a>
  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</p>
  
  <pre><code>&lt;label class="item-input-wrapper"&gt;
      &lt;i class="icon ion-search placeholder-icon"&gt;&lt;/i&gt;
      &lt;input id="search" type="search" ng-model="query" placeholder="Search"&gt;
    &lt;/label&gt;
  </code></pre>
  
  <p>and checking input field and I tried two different ways: 
  1)</p>
  
  <pre><code>.controller('ListController', ['$scope', '$http', '$state',
                function($scope, $http, $state) {
                     var query = document.getElementById('search');
                   if(query.value.length &gt; 0) {
                          $http.get('js/data.json').success(function(data) {        
                       $scope.artists = data.artists;
                });
            };
      }]);
  </code></pre>
  
  <p>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.</p>
  
  <p>2)</p>
  
  <pre><code>.controller('ListController', ['$scope', '$http', '$state', '$query',
                    function($scope, $http, $state, $query) {
                       if($query.value.length &gt; 0) {
                              $http.get('js/data.json').success(function(data) {        
                           $scope.artists = data.artists;
                    });
                };
          }]);
  </code></pre>
  
  <p>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.</p>