title: AngularJS: Pass $scope into Directive
body: <p>Trying to create a file upload directive using jQuery File Upload plugin and this gist of the directive <a href="https://gist.github.com/thoughtpalette/4726114" rel="nofollow">https://gist.github.com/thoughtpalette/4726114</a></p>
  
  <p>I need to pass in a id from an object in profile-ctrl.js into the submit functionality for the upload form.</p>
  
  <p>My Directive lies outside of the controller and I couldn't set the object to $rootScope to catch/pass it in the directive.</p>
  
  <p>the url: in fileupload is where the magic happens. Calling my controller via an api and passing over the file information and hopefully the vendorId which is in the merchant object in profile-ctrl.js. <code>$scope.merchant</code></p>
  
  <p><strong>I cannot post in a fiddle due to the project structure unfortunately</strong></p>
  
  <p><strong>My Directive:</strong></p>
  
  <pre><code>//jqueryFileUpload-Plugin 
  //https://github.com/blueimp/jQuery-File-Upload
  define(['jquery',
          'angular',
          'core',
          'source/core/helpers/urlHelper.js'],
      function ($, angular, core, urlHelper) {
      "use strict";
      return [ function ($compile) {
          return {
              restrict:'E',
              scope: {
                  merchant: '=ngModel'
              },
              compile:function(el,attrs, scope){
                  var compiler = this,
                  elem = el,
                  vendorId = scope.merchant.id;
                  instanceFn = function() {
                      var currentScope = this,
                          fileInputDiv = $(' &lt;span class="btn btn-success fileinput-button"&gt;'+
                          '&lt;i class="icon-plus icon-white"&gt;&lt;/i&gt;'+
                          '&lt;span&gt;Upload Logo&lt;/span&gt;'+
                          '&lt;input type="file" name="files[]" single&gt;'+
                          '&lt;/span&gt;').appendTo(elem),
                          fileInput = fileInputDiv.find('input'),
                          fileList = $('&lt;div class="UploaderList"&gt;'+
                          '&lt;table&gt;'+
                          '&lt;tr&gt;'+
                          '&lt;td&gt;File to Upload&lt;/td&gt;'+
                          '&lt;/tr&gt;'+
                          '&lt;/table&gt;'+
                          '&lt;/div&gt;').appendTo(elem),
                          button = $('&lt;button class="btn"&gt;Submit&lt;/button&gt;').appendTo(elem);
  
                      button.hide();
                      $('&lt;div class="uploader"&gt;').appendTo(elem);
                      $('&lt;/div&gt;').appendTo(elem);
  
                      fileInput.fileupload({
                          url:urlHelper.vendor.uploadLogo(vendorId),
                          dataType: 'json',
                          add:function (e, data) {
  
                              button.show();
  
                              // this will add a handler which will submit this specific file
                              button.bind('click.uploadsubmit', function(){ 
                                  data.submit();
                              });
                              $.each(data.files, function (index, file) {
                                  $("&lt;tr&gt;&lt;td&gt;"+file.name+"&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;tr&gt;").appendTo(fileList.find('table:first'));
                              });
                          },
                          // for each file
                          done: function (e, data) {
  
                              button.hide();
  
                              var result = "",
                                  r = data.result,
                                  file = data.files[0]; // we only support single file upload by now
                              // error
  
                              // CHANGE THIS PART FOR YOUR REQUIREMENTS (I have a json repsonse)
  
                              if(r.success !== undefined &amp;&amp; r.success === false){
                                  result = "&lt;span class='error'&gt;Unknown error&lt;/span&gt;";
                                  if(r.errors !== undefined &amp;&amp; r.errors.length &gt; 0 &amp;&amp; r.errors[0].message !== undefined)
                                  {
                                      result = "&lt;span class='error'&gt;"+r.errors[0].message+"&lt;/span&gt;";
                                  }
                              }
                              else{
                                  result = "&lt;span class='success'&gt;OK&lt;/span&gt;";
                              }
  
                              $("td:contains('"+file.name+"')").next().html(result);
                          },
                          progressall:function (e, data) {
                              var progress = parseInt(data.loaded / data.total * 100, 10);
                          },
                          // called only once... (wen submit button is clicked)
                          start:function(e){
  
                              // we start the upload, so we do also cleanup jobs right now:
                              button.unbind('click.uploadsubmit'); // importan - remove all event handlers
                              button.hide();
                              fileInputDiv.hide();
  
                          }
                      });
  
                  };
                  return instanceFn;
              }
  
          };
      }]; 
  });
  </code></pre>
  
  <p><strong>Directive Call via html:</strong></p>
  
  <pre><code>&lt;jquery-File-Upload ng-model="merchant"&gt;&lt;/jquery-File-Upload&gt;
  </code></pre>
  
  <p>So right now merchant returns undefined in the directive. Can someone help me pass that in?</p>