title: angularJS directive not immediately honoring ng-show/ng-hide
body: <p>I have the following section of HTML in an angularJS application. The &lt;div/&gt; tag for appointment-list is showing a listing of appointments. This directive is basically just a table. </p>
  
  <pre><code>    &lt;div ng-show="loading"&gt;Loading...&lt;/div&gt;
      &lt;div ng-show="!loading &amp;&amp; (appointments.length == 0)"&gt;No Appointments Found&lt;/div&gt;
      &lt;div ng-hide="loading || (appointments.length == 0)"&gt;Test123&lt;/div&gt;
      &lt;div ng-hide="loading || (appointments.length == 0)" appointment-list source="appointments" appointment-selected="appointmentSelected(appointment)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I then have the following in my controller. I am setting a loading variable while things are in-flight, and then I also filter the appointments on the page according to text in a text box. </p>
  
  <pre><code>    $scope.$watch('selectedDate', function(newVal, oldVal) {
      if (newVal) {
              $scope.loading = true;
              Appointment.query({year: newVal.getYear()+1900, month: newVal.getMonth()+1, day: newVal.getDate()}, function(data) {
                      $scope.allAppointments = data;
                      $scope.appointments = $scope.filterAppointments();
                      $scope.loading = false;
              });
      }
  
      });
  </code></pre>
  
  <p>My issue is that the hiding of the div for my custom directive isn't happening properly. The table should be disappearing exactly along with the "Test123" string and its not. When I go from a selected date with the table populated to a date with nothing on there, the "Test123" will be replace with the loading (therefor its being hidden, and loading being shown) but the table remains until after the loading process is complete at which point the table will disappear</p>
  
  <p>Can someone explain why the delay? Why is the directive not responding exactly like the div above it?</p>
  
  <p><b>Edit</b></p>
  
  <p>Here is a plnkr which shows the issue: <a href="http://plnkr.co/edit/khxQuaM6sxTx5RszvowX?p=preview" rel="nofollow">http://plnkr.co/edit/khxQuaM6sxTx5RszvowX?p=preview</a></p>
  
  <p>Basically click on the buttons at the top to load the two datasets. I have a timeout in there to simulate some of the think time on the server. Whenever you see "Loading..." the div for the appointmentList table should not be shown since ng-hide will evaluate to true because loading is true, yet is doesn't disappear. </p>