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>

Answer 2

As @Pzyon said you the property dataLoaded is out of scope and managed by the warrantyListController controller. Here are 2 ways to handle this, unless there is a compelling reason not to, I would go for option #1.

1. Wrap the content of the file warranty/single.html in a div, and have the whole thing managed by the warrantySingleController controller.

2. Use $emit and/or $broadcast to send a message from warrantySingleController to warrantyListController that the data has loaded

Answer 3

It could be protoypal inheritance issue. Try to wrap your scope in some object eg:

$scope.wrapper = {
   dataLoaded: false
}

and reference to it by {{wrapper.dataLoaded}}

Read this: https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance