To achieve your requirement you need a wrapper controller that hold ng-switch on
model because ngSwitch creates child scope
.
You can design your view like
<body ng-controller="mainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="signInCtrl">
<h1>this is sign in page</h1>
<a href="javascript:void(0)" ng-click="signin()">sign in</a>
<br>
<a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>
</div>
<div ng-switch-when="signup" ng-controller="signUpCtrl">
<h1>this is sign up page</h1>
<a href="javascript:void(0)" ng-click="signup()">sign up</a>
<br>
<a href="javascript:void(0)" ng-click="view.name = null">go to sign in page</a>
</div>
</div>
</body>
Here mainCtrl
holds view.name
and by default ng-switch-default
works means your sign in page
, then when you click
<a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>
view.name
model changed and your sign-up
page appear.
Check the Demo