fix(toast): toast template transform was not appending nodes.

* Currently the toast template transform function was only appending *elements* (no nodes) and even the syntax for appendChild accepts only one node (not multiple)

Fixes #8131.

Closes #8132

Author: devversion

src/components/toast/toast.js

@@ -338,10 +338,16 @@ function MdToastProvider($$interimElementProvider) {
           var templateRoot = document.createElement('md-template');
           templateRoot.innerHTML = template;
 
+          // Iterate through all root children, to detect possible md-toast directives.
           for (var i = 0; i < templateRoot.children.length; i++) {
             if (templateRoot.children[i].nodeName === 'MD-TOAST') {
               var wrapper = angular.element('<div class="md-toast-content">');
-              wrapper.append(templateRoot.children[i].children);
+
+              // Wrap the children of the `md-toast` directive in jqLite, to be able to append multiple
+              // nodes with the same execution.
+              wrapper.append(angular.element(templateRoot.children[i].childNodes));
+
+              // Append the new wrapped element to the `md-toast` directive.
               templateRoot.children[i].appendChild(wrapper[0]);
             }
           }

src/components/toast/toast.spec.js

@@ -209,6 +209,20 @@ describe('$mdToast service', function() {
         expect(toast.length).not.toBe(0);
       }));
 
+      it('should correctly wrap the custom template', inject(function($timeout, $rootScope, $rootElement) {
+        var parent = angular.element('<div>');
+
+        setup({
+          template: '<md-toast>Message</md-toast>',
+          appendTo: parent
+        });
+
+        var toast = $rootElement.find('md-toast');
+        $timeout.flush();
+
+        expect(toast[0].querySelector('.md-toast-content').textContent).toBe('Message');
+      }));
+
       it('should add position class to toast', inject(function($rootElement, $timeout) {
         setup({
           template: '<md-toast>',