title: Changing ng-hide based on variable value in angular.js
body: <p>I am a newb to angular.js and have inherited code.  There is a dataset (customerType) that displays using ng-repeat.  There are 3 table rows that I want to display only if the customerType.type is equal to "new".  These 3 rows all have "ng-hide=" in their respective  tags below.  How do I do this in angular.js?  The directives I see all seem to apply to the entire screen display so I am not sure how to change a scope variable for only part of the display.  Here's the html:</p>
  
  <pre><code>&lt;div ng-repeat="customerType in customerTypes" class="span6"&gt;
    &lt;table class="table table-bordered table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th colspan="3"&gt;
            &lt;div class="span11 centered-text"&gt;
                {{customerType.title}}
            &lt;/div&gt;
            &lt;div class="span1"&gt;
                &lt;a href="javascript:void(0);" ng-click="pullDetail(customerType.type, customerType.clients)" title="Details"&gt;&lt;i class="icon-list-alt"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;
            &lt;div class="centered-text"&gt;
              Month Selected
            &lt;/div&gt;
          &lt;/th&gt;
          &lt;th&gt;
            &lt;div class="centered-text"&gt;
              YTD
            &lt;/div&gt;
          &lt;/th&gt;
        &lt;/tr&gt;                             
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Revenue&lt;/td&gt;
          &lt;td&gt;{{customerType.month.revenue}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.revenue}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Gross Profit&lt;/td&gt;
          &lt;td&gt;{{customerType.month.gross}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.gross}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;# of Customers&lt;/td&gt;
          &lt;td&gt;{{customerType.month.customers}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.customers}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Avg GP per Customer&lt;/td&gt;
          &lt;td&gt;{{customerType.month.avg_gp}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.avg_gp}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;# of Jobs&lt;/td&gt;
          &lt;td&gt;{{customerType.month.jobs}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.jobs}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-hide=&gt;
          &lt;td&gt;First Time Client - Revenue&lt;/td&gt;
          &lt;td&gt;{{customerType.month.ftc_revenue}}&lt;/td&gt;
          &lt;td&gt;N/A&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-hide=&gt;
          &lt;td&gt;First Time Client - Gross Profit&lt;/td&gt;
          &lt;td&gt;{{customerType.month.ftc_gross}}&lt;/td&gt;
          &lt;td&gt;N/A&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-hide=&gt;
          &lt;td&gt;First Time Client - # of Customers&lt;/td&gt;
          &lt;td&gt;{{customerType.month.ftc_customers}}&lt;/td&gt;
          &lt;td&gt;-----&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-hide=&gt;
          &lt;td&gt;First Time Client - # of Jobs&lt;/td&gt;
          &lt;td&gt;{{customerType.month.ftc_jobs}}&lt;/td&gt;
          &lt;td&gt;-----&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;% on Contract&lt;/td&gt;
          &lt;td&gt;{{customerType.month.contract}}&lt;/td&gt;
          &lt;td&gt;{{customerType.ytd.contract}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here are the current directives:</p>
  
  <pre><code>var ReportController = function($scope, $http){
  $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  
  $scope.filter = true;
  $scope.report = false;
  $scope.detail = false;
  
  $scope.customerTypes = [];
  $scope.detail_report = [];
  $scope.companies = companies;
  $scope.nsperiods = nsperiods;
  $scope.users = users;
  
  $scope.pullReport = function(sync){
      if(sync){
          var xsr = {request: 'report', company_no: $scope.company, nsperiod: $scope.nsperiod, users_no: $scope.user};
          $('form button').button('loading');
          $http({
              method: 'POST',
              headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              transformRequest: function(obj) {
                  var str = [];
                  for(var p in obj)
                  str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                  return str.join("&amp;");
              },
              data: xsr
          }).success(function(response){
              $scope.filter = false;
              $scope.report = true;
              $scope.detail = false;
              $('form button').button('reset');
              $scope.customerTypes = response;
          }).error(function(error){
              $('form button').button('reset');
              return;
          });
      }else{
          $scope.filter = false;
          $scope.report = true;
          $scope.detail = false;
      }
  }
  
  $scope.backToFilters = function(){
      $scope.filter = true;
      $scope.report = false;
      $scope.detail = false;
  }
  
  $scope.pullDetail = function(type, clients){
      var xsr = {
          request: 'detail', 
          type: type, 
          company_no: $scope.company,
          nsperiod: $scope.nsperiod,
          users_no: $scope.user
      };
      $http({
          method: 'POST',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
              str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&amp;");
          },
          data: xsr
      }).success(function(response){
          $scope.filter = false;
          $scope.report = false;
          $scope.detail = true;
          $scope.detail_report = response;
      }).error(function(error){
          return;
      });                 
  }
  };
  </code></pre>
  
  <p>Any help would be greatly appreciated.  I'm trying to wrap my head around this but something just isn't quite connecting.</p>