title: Angular Material: How to display one toast after another one is displayed while keeping both on screen?
body: <p>I'm using <strong>$mdToast</strong> (Angular Material framework) directive to show several status messages in my Angular(-Material) web app.</p>
  
  <p>When the user signs-in, if the login is successful a toast is shown by calling:</p>
  
  <pre><code>     $scope.showToastMessage = function() {
           var toast = $mdToast.simple()
               .content("Login successful);
               .action('OK')
               .highlightAction(false)
               .position($scope.getToastPosition());
            $mdToast.show(toast).then(function(toast) {
                  //...
               }
           }); 
       };
  </code></pre>
  
  <p>After login success  I need to make another check (e.g. valid session cookie) and show another toast message <strong>without overriding the previous one</strong> and <strong>after the previous one is actually showed</strong>.</p>
  
  <p>The issues I get here are:</p>
  
  <ul>
  <li>the second toast is shown <strong>before</strong> the new one (probably due to $mdTost's async nature)</li>
  <li>this second toast is shown for less than one second and then <strong>disappears</strong> leaving on screen only the <strong>first</strong> one (basicly the second one is shown first and then hidden when the first one appears)</li>
  </ul>
  
  <p>A solution could be either:</p>
  
  <ul>
  <li>creating the second toast inside then <strong>.then</strong> callback: this doesn't work either because requires the user interventions to press the "OK" action button</li>
  <li><p>calling <strong>$mdToast.updateContent();</strong> (<a href="https://material.angularjs.org/#/api/material.components.toast/service/">https://material.angularjs.org/#/api/material.components.toast/service/</a>$mdToast) which would overwrite previous toast message (this is not the best solution but would be fine either) but I can't figure out how:</p>
  
  <p>(1) choose a specific toast shown on screen (let's suppose I have several toasts shown by different calls) , and</p>
  
  <p>(2) update the toast message after a delay (let's say 3 seconds) in order to show to make the user undersand that the login was successful but there is some other information.</p></li>
  </ul>
  
  <p>Any clue?</p>