ng-click does not work for second time with ng-hide interaction

Question

I have two buttons and only 1 of them appears at a time. First one is called "Offline mode" other one is "Online mode". They appear like this on HTML:

<a ng-hide="offlineMode == true" ng-click="offlineMode()">Offline Mode</a> 
<a ng-show="offlineMode == true" ng-click="onlineMode()">Online Mode</a>

When I click to "Offline mode" for the first time it successfuly swaps into "Online mode" button. When I click "Online mode" after that it swaps back to "Offline mode". After this the button becomes unclickable. It does not enter inside the function.

JS:

$scope.offlineMode = function() {
    $scope.offlineMode = true;
    // do other things
};

$scope.onlineMode = function() {
    $scope.offlineMode = false;
    // do other things
};

Answer 1

You are getting this error because both the function and flag variable have the same name offlineMode

See console for this error:

v2.offlineMode is not a function

Fix: Simply rename the boolean variable to offline(or something else)

  $scope.offlineMode = function() {
      $scope.offline = true;
      // do other things
  };

  $scope.onlineMode = function() {
      $scope.offline = false;
      // do other things
  };  

ANd update the html accordingly

<a href="#" ng-hide="offline" ng-click="offlineMode()">Offline Mode</a><br> 
<a href="#" ng-show="offline" ng-click="onlineMode()">Online Mode</a>

Notice the changes in ng-hide and ng-show. You dont need to evaluate offline with true each time.

Here's the demo