AngularJS ng-show / ng-hide

Question

We are trying to incorporate this Stackoverflow example into our AngularJS script and can't seem to figure out why it isn't working correctly.

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.

These are the main snippets we used from the example: '$scope.dataLoaded = false;' 'ng-hide="dataLoaded"' '$scope.dataLoaded = true;' 'ng-show="dataLoaded"'

If anyone can see what we've missed or what we are doing wrong please let us know. Thank you.

Plunker

HTML

<div class="page-header col-md-12">
  <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
</div>
<div class="col-md-12"> 
  <p class="text-center" ng-hide="dataLoaded">
    <i class="fa fa-circle-o-notch fa-spin"></i>
  </p>

  <div class="panel panel-info" ng-controller="warrantySingleController" ng-show="dataLoaded">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
    </div>
    <div class="panel-body">
      <div class="bs-component">
       <table class="table table-striped table-hover" >
          <tbody>
            <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
            <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
            <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
            <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
          </tbody>
        </table> 
      </div>
    </div>
  </div>
</div>

CONTROLLER

.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;
  });
})

ANWSER

<div ng-controller="warrantySingleController">
  <div class="page-header col-md-12">
    <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
  </div>
  <div class="col-md-12"> 
    <p class="text-center" ng-hide="dataLoaded">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </p>

    <div class="panel panel-info"  ng-show="dataLoaded">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
      </div>
      <div class="panel-body">
        <div class="bs-component">
         <table class="table table-striped table-hover" >
            <tbody>
              <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
              <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
              <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
              <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

<div ng-controller="warrantySingleController">
  <div class="page-header col-md-12">
    <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
  </div>
  <div class="col-md-12"> 
    <p class="text-center" ng-hide="dataLoaded">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </p>

    <div class="panel panel-info"  ng-show="dataLoaded">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
      </div>
      <div class="panel-body">
        <div class="bs-component">
         <table class="table table-striped table-hover" >
            <tbody>
              <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
              <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
              <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
              <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>