title: Swapping content in Angular Material Dialog
body: <p>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.</p>
  
  <p>Here is the dialog html</p>
  
  <pre><code>&lt;md-dialog&gt;
    &lt;md-dialog-content&gt;
      &lt;div ng-if="lc.show_form == 'login'"&gt;
        &lt;form name="loginForm" ng-submit="loginForm.$valid &amp;&amp; lc.login()" novalidate&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Email&lt;/label&gt;
            &lt;input type="email" name="email" required ng-model="project.email"&gt;
  
            &lt;div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Password&lt;/label&gt;
            &lt;input type="password" name="password" required ng-model="project.password"&gt;
  
            &lt;div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-input-container&gt;
  
          &lt;md-button ng-click="lc.login()" class="md-raised md-primary"&gt;Login&lt;/md-button&gt;
          &lt;md-button ng-click="lc.showRegister()"&gt;Switch&lt;/md-button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div ng-if="lc.show_form == 'register'"&gt;
        &lt;form name="registerForm" ng-submit="registerForm.$valid &amp;&amp; lc.register()" novalidate&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Email&lt;/label&gt;
            &lt;input type="email" name="email" required ng-model="project.email"&gt;
  
            &lt;div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Password&lt;/label&gt;
            &lt;input type="password" name="password" required ng-model="project.password"&gt;
  
            &lt;div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Password Confirm&lt;/label&gt;
            &lt;input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm"&gt;
  
            &lt;div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-input-container&gt;
  
          &lt;md-button ng-click="lc.register()" class="md-raised md-primary"&gt;Register&lt;/md-button&gt;
          &lt;md-button ng-click="lc.showLogin()"&gt;Switch&lt;/md-button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/md-dialog-content&gt;
  &lt;/md-dialog&gt;
  </code></pre>
  
  <p>here is the controller code</p>
  
  <pre><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');
      };
    });
  </code></pre>
  
  <p>Here is a plunker of what I am trying to accomplish.
  <a href="http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview" rel="nofollow">http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview</a></p>
  
  <p>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.</p>