title: Returning scope items to parent scope with $mdDialog.show()
body: <p>Yo! I have a controller which houses a bunch of items on its <code>$scope</code>. One of the scope items, <code>$scope.openDialog</code> opens a <code>$mdDialog</code> via <code>$mdDialog.show()</code>. The object passed into <code>$mdDialog.show</code> has a template which houses controls for uploading files via the <code>ng-file-upload</code> project, which you can read about <a href="https://github.com/danialfarid/ng-file-upload" rel="nofollow noreferrer">here</a>. </p>
  
  <p>I would like it if the items uploaded in the dialog window would be available in the main controller after exiting out of the dialog window. I am not sure as to whether the controller for the dialog window should reference the main <code>myCtrl</code> controller or use its own, and how to take make uploaded files available to <code>myCtrl</code>. </p>
  
  <p>Here is the angular code:</p>
  
  <pre><code>angular.module('app', ['ngMaterial', 'ngFileUpload'])
  .controller('myCtrl', ['$scope', '$mdDialog', 'Upload', function($scope, $mdDialog, Upload) {
    var tmpl = "&lt;md-dialog&gt;\n" +
      "&lt;md-dialog-content&gt;\n" +
      "    &lt;input type=\"text\" ng-model=\"username\"&gt;&lt;/br&gt;&lt;/br&gt;\n" +
      "    &lt;input type=\"checkbox\" ng-model=\"multiple\"&gt;upload multiple file&lt;/br&gt;&lt;/br&gt;\n" +
      "    watching model:\n" +
      "    &lt;div class=\"button\" ngf-select ng-model=\"files\" ngf-multiple=\"multiple\"&gt;Select File&lt;/div&gt;\n" +
      "    on file change:\n" +
      "    &lt;div class=\"button\" ngf-select ngf-change=\"upload($files)\" ngf-multiple=\"multiple\"&gt;Select File&lt;/div&gt;\n" +
      "    Drop File:\n" +
      "    &lt;div ngf-drop ngf-select ng-model=\"files\" class=\"drop-box\" \n" +
      "        ngf-drag-over-class=\"dragover\" ngf-multiple=\"true\" ngf-allow-dir=\"true\"\n" +
      "        accept=\"image/*,application/pdf\"&gt;Drop pdfs or images here or click to upload&lt;/div&gt;\n" +
      "    &lt;div ngf-no-file-drop&gt;File Drag/Drop is not supported for this browser&lt;/div&gt;\n" +
      "    Image thumbnail: &lt;img ngf-src=\"files[0]\"&gt;\n" +
      "    Files:\n" +
      "    &lt;ul&gt;\n" +
      "        &lt;li ng-repeat=\"f in files\" style=\"font:smaller\"&gt;{{f.name}}&lt;/li&gt;\n" +
      "    &lt;/ul&gt;\n" +
      "    Upload Log:\n" +
      "    &lt;pre&gt;{{log}}&lt;/pre&gt;\n" +
      "&lt;md-action&gt;&lt;div class=\"button\" ng-click=\"close()\"&gt;close!&lt;/div&gt;&lt;/md-action&gt;\n" +
      "&lt;md-action&gt;&lt;div class=\"button\" ng-click=\"upload()\"&gt;upload!&lt;/div&gt;&lt;/md-action&gt;\n" +
      "&lt;/md-dialog-content&gt;\n" +
      "&lt;/md-dialog&gt;";
  $scope.files = ['files should appear here', 'files 1', 'file2'];
  $scope.openDialog = function () {
    $mdDialog.show({
          parent: angular.element(document.body),
          template: tmpl,
          controller: 'myCtrl'
      });
  };
  $scope.close = function() {
    $mdDialog.hide();
  };
  $scope.$watch('files', function () {
      $scope.upload($scope.files);
  });
  $scope.upload = function (files) {
          if (files &amp;&amp; files.length) {
              for (var i = 0; i &lt; files.length; i++) {
                  var file = files[i];
                  Upload.upload({
                      url: 'upload/url',
                      fields: {'username': $scope.username},
                      file: file
                  }).progress(function (evt) {
                      var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                      console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                  }).success(function (data, status, headers, config) {
                      console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                  });
              }
          }
      };
  }]); 
  </code></pre>
  
  <p>BTW: As a housekeeping note, I often hear that application logic shouldn't be passed into a controller. In this situation, how would you move <code>$scope.upload</code> into a factory, given that it references <code>$scope</code> and <code>$scope</code> is not available in factories?</p>
  
  <p>Thanks for the help. </p>
  
  <p>Plnkr: <a href="http://plnkr.co/edit/e2MYdEABhj34ahtPTO0g?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/e2MYdEABhj34ahtPTO0g?p=preview</a></p>