binding dynamic HTML select element in angular with dropzone.js
<p>I am using dropzone.js, which <strong>dynamically adds HTML</strong> content to a page when a file is dropped.</p>

<p>In my case the dynamic HTML contains an <strong>angular</strong> bound <code>select</code> element.</p>

<p>I need angular to refresh (and bind) the select contained in the dynamic HTML.</p>

<p>I am attempting to use the <code>$compile</code> method to compile the added dom elements after they are added by dropzone, so that the <code>select</code> is populated.</p>

<pre><code>// this directive creates the dropzone.js component, and attempts to
// compile the added dynamic HTML
export class DocumentDropZone implements ng.IDirective {
  constructor(public $log, public $compile) {
  }

  public link: Function = (scope: any, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) =&gt; {
    this.$log.log('initialised drop zone.');
    var compile = this.$compile;
    var dz = new Dropzone("body",
        {
            url: 'test',
            previewTemplate: &lt;any&gt;$('script[type="text/template"]').html(),
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            init: function() {
                  this.on('success', function(file, json) {
                  });

                  this.on('addedfile', function(file) {
                      // ATTEMPT TO COMPILE THE ADDED DOM ELEMENT
                      // SO THAT ANGULAR BINDS THE SELECT
                      compile($('div#template'));
                  });

                  this.on('drop', function(file) {
                  });

                }
            });
  }
}
</code></pre>

<p>Here is a part of the template.</p>

<pre><code>&lt;select class="form-control"             
        ng-model="documentType"
        ng-options="documentType.name for documentType in dc.documentTypes track by documentType.id"&gt;
&lt;/select&gt;
</code></pre>

<p>I <strong>know the select works,</strong> when not dynamically added as if I put the select somewhere else on the page it is populated correctly.</p>

<p><em>The compile method doesn't seem to bind the select?</em></p>

<p>I have also tried.</p>

<pre><code>scope.$apply(function() {
    compile($('div#template'));
});
</code></pre>