Why this ng-show ng-hide not working

The likely reason it is not working is because you are creating a new scope property within a child scope, instead of overwriting the message property in merchantListController's scope as you would have expected.

// The following assignment will create a 'message' variable // in the child scope which is a copy of the scope variable   // in parent scope - effectively breaking two-way model binding.$scope.message = true;

To resolve this, make sure that you bind by reference to a property on your model rather than to a property on scope.

HTML

<div ng-show="my.message">   <h2>show</h2></div><div ng-hide="!my.message">   <h2>Hide</h2></div>

Controller

function merchantListController($scope, $http, $rootScope, $location, global) {   // Initialize my model - this is important!   $scope.my = { message: false };   $http({        method: 'POST',        url: global.base_url + '/merchant/list',    }).success(function($data) {        if ($data.status === 'success') {            $scope.merchants = $data.data;            // modify the 'message' property on the model            $scope.my.message   = true;        }    });});

Explanation

The reason this works is because the model my is being resolved using scope inheritance rules. That is, if my does not exist in current scope, then search for my in the parent scope, until it is either found, or the search stops at $rootScope. Once the model is found, the message property is overwritten.

The show/hide logic is wrong... change it like: ng-hide="message"

    <div ng-show="message">       <h2>show</h2>    </div>   <div ng-hide="message">       <h2>Hide</h2>   </div>

ng-hide needs variable when to hide, ng-show needs it when to show , so the condition ng-show="message" & ng-hide="!message" are the same.

Try doing this:

    <div ng-show="message">       <h2>show</h2>    </div>   <div ng-show="!message">       <h2>Hide</h2>   </div>

Just for testing... change your http class to this:

$http({    method: 'POST',    url: global.base_url + '/merchant/list',}).success(function($data) {            $scope.message   = true;    }).error(function($data) {            $scope.message   = false;    });

Because you did a mistake...ng-show="message" and ng-hide="!message" both points to the same value..Correct it as..<div **ng-show="message"**>    <h2>show</h2></div><div **ng-hide="message"**>    <h2>Hide</h2></div>//or you can do in your way as...<div **ng-show="message"**>    <h2>show</h2></div><div **ng-show="!message"**>    <h2>Hide</h2></div