title: Show element based on $scope variable value
body: <p>I am new to AngularJS and am trying to figure out how to show an HTML element based on a variable value.</p>
  
  <p>I have tried this:</p>
  
  <pre><code>&lt;div id="checkoutForm" class="form" ng-show="$scope.matchCount==1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>&lt;div id="checkoutForm" class="form" ng-show="matchCount==1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div id="visitorForm" class="form" ng-controller="VisitorLogController"&gt;
      &lt;input id="firstNameTb" ng-model="formData.FIRSTNAME" placeholder="@Model.FirstNameStr" ng-blur="findUser()" class="form-control" value="{{FIRSTNAME}}"/&gt;
      &lt;input id="lastNameTb" ng-model="formData.LASTNAME" placeholder="@Model.LastNameStr" ng-blur="findUser()" class="form-control" value="{{LASTNAME}}" /&gt;
      &lt;input id="companyTb" ng-model="formData.COMPANYNAME" placeholder="@Model.CompanyStr" ng-blur="findUser()" class="form-control" value="{{COMPANYNAME}}" /&gt;
      &lt;input id="codeTb" ng-model="formData.CHECKCODE" placeholder="@Model.CodeString" title="@Model.CodeStringDesc" ng-blur="findUser()" class="form-control" /&gt;
  &lt;/div&gt;
  
  &lt;div id="checkoutForm" class="form" ng-show="matchCount==1"&gt;
      &lt;h3&gt;@Html.Raw(@Model.RecordFoundStr)&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in my .js file:</p>
  
  <pre><code>function VisitorLogController($scope, $http) {
  
      $scope.matchCount = null;
      $scope.findUser = function () {
          $http({
              method: 'POST',
              url: rootUrl + "VisitorLog/Check",
              data: $.param($scope.formData),
              headers: { 'Content-type': 'application/x-www-form-urlencoded' }
          }).success(function (data) {
              $scope.matchCount = data.count;
              if (data.count == 1) {
                  $scope.FIRSTNAME = data.visitors[0].FirstName;
                  $scope.LASTNAME = data.visitors[0].LastName;
                  $scope.COMPANYNAME = data.visitors[0].CompanyName;
              }
              $scope.message = data.message;
          });
      }
  }
  </code></pre>
  
  <p>The function fires as expected and I can see the count and verify that $scope.matchCount is correctly getting updated with the record count, but it does not affect the UI at all.</p>
  
  <p>What am I missing?</p>