title: Why this ng-show ng-hide not working
body: <p>I have simple app in AngularJS. I want to show messages dynamically when an AJAX request is made. Unfortunately it always in hidden state and I can't figure out why.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-show="message"&gt;
      &lt;h2&gt;show&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div ng-hide="!message"&gt;
      &lt;h2&gt;Hide&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS controller:</p>
  
  <pre><code>function merchantListController($scope, $http, $rootScope, $location, global) {
      $http({
          method: 'POST',
          url: global.base_url + '/merchant/list',
      }).success(function($data) {
          if ($data.status === 'success') {
              $scope.merchants = $data.data;
  
              $scope.$apply(function(){
                  $scope.message = true;
              });
          }
      });
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/LWffe.png" alt="screenshot"></p>