title: AngularJS ng-show / ng-hide
body: <p>We are trying to incorporate this <a href="https://stackoverflow.com/questions/23490596/angularjs-loading-icon-whilst-waiting-for-data-data-calculation">Stackoverflow</a> example into our <a href="http://angularjs.org/" rel="nofollow noreferrer">AngularJS</a> script and can't seem to figure out why it isn't working correctly.</p>
  
  <p>We want to display a loading icon until the JSON data is rendered, once the JSON is ready we then want the icon to hide. </p>
  
  <p>These are the main snippets we used from the example:
  '$scope.dataLoaded = false;' 'ng-hide="dataLoaded"'
  '$scope.dataLoaded = true;' 'ng-show="dataLoaded"'</p>
  
  <p>If anyone can see what we've missed or what we are doing wrong please let us know.
  Thank you.</p>
  
  <p><a href="http://plnkr.co/edit/Vv3onQFnqmVRTuDJ8Xtu?p=preview" rel="nofollow noreferrer">Plunker</a>   </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="page-header col-md-12"&gt;
    &lt;h4&gt;&lt;i class="fa fa-tasks"&gt;&lt;/i&gt; Warranty Job&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="col-md-12"&gt; 
    &lt;p class="text-center" ng-hide="dataLoaded"&gt;
      &lt;i class="fa fa-circle-o-notch fa-spin"&gt;&lt;/i&gt;
    &lt;/p&gt;
  
    &lt;div class="panel panel-info" ng-controller="warrantySingleController" ng-show="dataLoaded"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;&lt;i class="fa fa-tasks"&gt;&lt;/i&gt; {{warrantySingleData[0].Title}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;div class="bs-component"&gt;
         &lt;table class="table table-striped table-hover" &gt;
            &lt;tbody&gt;
              &lt;tr&gt;&lt;td&gt;JobID: {{warrantySingleData[0].JobID}}&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Model: {{warrantySingleData[0].Model}}&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Title: {{warrantySingleData[0].Title}}&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Date: {{warrantySingleData[0].ReminderDate}}&lt;/td&gt;&lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CONTROLLER</strong></p>
  
  <pre><code>.controller('warrantySingleController', function($scope, $http, $stateParams) {
    $scope.params = $stateParams.jobID[0];
    $scope.dataLoaded = false;
    $http({
      url: 'http://jsonstub.com/warranty/'+$scope.params,
      method: 'GET',
      dataType: 'json', 
      data: '',         
      headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': 'http://run.plnkr.co',
          'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
          'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
      }
    }).success(function (data, status, headers, config) {
      $scope.warrantySingleData = data;
      $scope.dataLoaded = true;
    }).error(function(data,status,error,config){
      $scope.warrantySingleData =  [{heading:"Error",description:"Could not load json data"}];
      $scope.dataLoaded = false;
    });
  })
  </code></pre>
  
  <p><strong>ANWSER</strong></p>
  
  <pre><code>&lt;div ng-controller="warrantySingleController"&gt;
    &lt;div class="page-header col-md-12"&gt;
      &lt;h4&gt;&lt;i class="fa fa-tasks"&gt;&lt;/i&gt; Warranty Job&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12"&gt; 
      &lt;p class="text-center" ng-hide="dataLoaded"&gt;
        &lt;i class="fa fa-circle-o-notch fa-spin"&gt;&lt;/i&gt;
      &lt;/p&gt;
  
      &lt;div class="panel panel-info"  ng-show="dataLoaded"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;&lt;i class="fa fa-tasks"&gt;&lt;/i&gt; {{warrantySingleData[0].Title}}&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="bs-component"&gt;
           &lt;table class="table table-striped table-hover" &gt;
              &lt;tbody&gt;
                &lt;tr&gt;&lt;td&gt;JobID: {{warrantySingleData[0].JobID}}&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Model: {{warrantySingleData[0].Model}}&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Title: {{warrantySingleData[0].Title}}&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Date: {{warrantySingleData[0].ReminderDate}}&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>