title: angularjs ng-if not empty for ng-repeat
body: <p>I have a list of elements I want to display only if not null and empty, and for that I placed a ng-if before a ng-repeat block:</p>
  
  <pre><code>            &lt;tbody ng-if="adsNotEmpty"&gt;
  
                  &lt;!-- Start: list_row --&gt;
                  &lt;tr ng-repeat="ad in ads"&gt;
                      &lt;td&gt;{{$index + 1}}&lt;/td&gt;
                      &lt;ad-thumbnail ad="ad"/&gt;
                  &lt;/tr&gt;                   
                  &lt;!-- End: list_row --&gt;
  
              &lt;/tbody&gt;
  </code></pre>
  
  <p>for that I have a controller code which evaluates the ads list and sets the adsNotEmpty var:</p>
  
  <pre><code>controllers.controller('AdCtrl', ['$scope', 'AdService',
    function($scope, AdService) {
      $scope.ads = AdService.query();
      $scope.adsNotEmpty = ($scope.ads &amp;&amp; $scope.ads.length &gt; 0);
    }]);
  </code></pre>
  
  <p>I have a RESTful webservice which currently returns HTTP 200 OK status with an empty response, even though the adsNotEmpty results to false the code enters inside of ad-thumbnail directive:</p>
  
  <p>ad-thumbnail directive content:</p>
  
  <pre><code>&lt;td&gt;
  AD - {{ad.name}}
  &lt;/td&gt;
  </code></pre>
  
  <p>the resulting HTML ends up printing AD - on the screen even though the ads list is empty.</p>
  
  <p>the resulting object from </p>
  
  <p><code>$scope.ads = AdService.query();</code></p>
  
  <p>shows on debug:</p>
  
  <pre><code>Array[0]
  $promise: Object
  $resolved: false
  length: 0
  __proto__: Array[0]
  </code></pre>
  
  <p>What could be wrong with the code above to prevent angular from rendering the ad-thumbnail directive ?</p>
  
  <p>I am posting the solution here for reference:</p>
  
  <p>in controller:</p>
  
  <pre><code>controllers.controller('AdCtrl', ['$scope', 'AdService',
    function($scope, AdService) {
  
      AdService.query(function(data) {
          $scope.ads = data;
          $scope.adsNotEmpty = ($scope.ads.length &gt; 0);
      });
  </code></pre>
  
  <p>and in page:</p>
  
  <pre><code>    &lt;tbody&gt;
          &lt;!-- Start: list_row --&gt;
          &lt;tr ng-repeat="ad in ads"&gt;
              &lt;td ng-if="adsNotEmpty"&gt;{{$index + 1}}&lt;/td&gt;
              &lt;ad-thumbnail ad="ad" ng-if="adsNotEmpty"/&gt;
          &lt;/tr&gt;                   
          &lt;!-- End: list_row --&gt;
      &lt;/tbody&gt;
  </code></pre>