Swapping content in Angular Material Dialog - angular-material

Question

I am trying to create a Login/Register dialog using Angular Material. The dialog should switch between a login page and a register page when you click the 'Switch' button.
Here is the dialog html
<md-dialog>
<md-dialog-content>
<div ng-if="lc.show_form == 'login'">
<form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
<md-button ng-click="lc.showRegister()">Switch</md-button>
</form>
</div>
<div ng-if="lc.show_form == 'register'">
<form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password Confirm</label>
<input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">
<div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
<md-button ng-click="lc.showLogin()">Switch</md-button>
</form>
</div>
</md-dialog-content>
</md-dialog>
here is the controller code
angular.module('dialogDemo', ['ngMaterial'])
.controller('AppCtrl', function($mdDialog, $log) {
$mdDialog.show({
controller: 'dialogCtrl',
controllerAs: 'lc',
templateUrl: 'loginDialog.tmpl.html'
});
})
.controller('dialogCtrl', function($scope, $log) {
var self = this;
self.show_form = 'login';
self.showRegister = function() {
self.show_form = 'register';
console.log('show register');
};
self.showLogin = function() {
self.show_form = 'login';
console.log('show login');
};
});
Here is a plunker of what I am trying to accomplish.
http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview
Click the switch button. You will notice that the content changes, but if you click the switch button a second time the dialog only resizes, If you click it a third time it switches back. I am trying to figure out why it won't switch between the two views with only one click of the button.

Answer 1

Your plunker is working well for me.
I press login and i get the login modal, then i press register and the modal turns into register modal. If i press login again i get login modal.
pd: I am using chrome.