title: AngularJS - Show / Hide Loader
body: <p>Question about "scope" in angularJS
  I try to show a loading animation when i do a search.</p>
  
  <p>In my controller i create a var called "loader"
  and in the HTML i put ng-show="loader" on the div that i would like to show/hide</p>
  
  <p>Simple... But...</p>
  
  <p>I can show the loader but can't hide it...</p>
  
  <p>Here is my code...</p>
  
  <p>HTML :</p>
  
  <pre><code> &lt;secion ng-controller="ContactsCtrl"&gt;
      &lt;div class="loader" ng-show="loading"&gt;&lt;/div&gt;
  
      &lt;h2&gt;Contacts&lt;/h2&gt;
  
      &lt;form class="form-search"&gt;
          &lt;input type="text" ng-model="s_search" placeholder="Search for a contact..."&gt;
          &lt;button type="submit" class="btn" ng-click="search()"&gt;Search&lt;/button&gt;    
      &lt;/form&gt;
  
      &lt;div id="resultContact"&gt;&lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>function ContactsCtrl($scope){
      $scope.loading = false;
  
      $scope.endLoading = function(){
          $scope.loading = false;
      }     
  
      $scope.search = function() {
          $scope.loading = true;
  
          setTimeout($scope.endLoading, 1000);
      }
  }
  </code></pre>
  
  <p>I suppose the problem is with the "scope inherits" but i don't see my mistake</p>