Toggle Login-ngSwitch

Which element to display-- ngSwitch simply choses one of the nested elements and makes it visible based on which element matches the value obtained from the evaluated expression. In other words, you define a container element (where you place the directive), place an expression on the on="..." attribute (or the ng-switch="..." attribute), define any inner elements inside of the directive and place a when attribute per element. The when attribute is used to inform ngSwitch which element to display when the on expression is evaluated.

by gogirl

HTML

<div ng-app="app" ng-controller="MyCtrl">
   <div ng-switch on="isTrue"> 
      <div ng-switch-when="false" ng-include="'setTrue'"></div>
      <div ng-switch-when="true" ng-include="'setFalse'"></div>
   </div>
</div>

<script type="text/ng-template" id='setTrue'>
    <button ng-click="setTrue()">Login</button>
    <a ng-click="setTrue()">Login</a>
</script>

<script type="text/ng-template" id='setFalse'>
    <button ng-click="setFalse()">Logout</button>
     <a ng-click="setTrue()">Login</a>
</script>

JavaScript

var app = angular.module('myApp', []);
// ng-switch-conditionally swap DOM structure based on a state.
// ng-includes-fetches, compiles and includes an external HTML fragment
// ng-include: {string}= a string constant that needs quotes to wrap it.
function MyCtrl($scope) {
    //toggle bool state code
    $scope.isTrue = false;
    $scope.setTrue = function() {
         $scope.isTrue = true;
    };
    $scope.setFalse = function() {
         $scope.isTrue = false;
    };
}