title: AngularJS - Any way to call javascript after the template is linked?
body: <p>I'm trying to use a jQuery plugin (<a href="http://www.plupload.com/index.php" rel="nofollow">Plupload</a>) with AngularJS. I have created a directive that will be my file upload "widget". The directive looks like this (The code in the link function is a very simplified version of <a href="http://www.plupload.com/example_custom.php" rel="nofollow">the example on the Plupload site</a>):</p>
  
  <pre><code>.directive('myFileUpload', function () {
      return {
          restrict: 'E',
          replace: true,
          link: function(scope, element, attrs) {
              scope.uploaderProperties = {
                      runtimes : 'html5,flash,html4',
                      url : 'media/upload',
                      max_file_size : '10mb',
                      container: 'fileUploadContainer',
                      drop_element: 'fileUploadDropArea'
              };
  
              scope.uploader = new plupload.Uploader(scope.uploaderProperties);
  
              scope.uploader.init();
  
              scope.uploader.bind('FilesAdded', function(up, files) {
                  scope.$apply();
              });
          },
          templateUrl: 'upload.html'
      };
  });
  </code></pre>
  
  <p>My upload.html file looks like this:</p>
  
  <pre><code>&lt;div id="{{uploaderProperties.container}}"&gt;
      &lt;div id="{{uploaderProperties.drop_element}}" style="border: 1px black dashed;"&gt;Drop files here&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
      Files to upload:&lt;br&gt;
      &lt;div ng-repeat="currFile in uploader.files"&gt;{{currFile.name}} ({{currFile.size}}) &lt;/div&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;!-- for debugging --&gt;
      {{uploader.files}}
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I include the directive on my page with a <code>&lt;my-file-upload&gt;</code> element, all the data bindings happen correctly. The problem is, when <code>scope.uploader.init();</code> runs, the ids haven't been inserted into the DOM yet, and so Plupload complains and breaks since it can't select those elements. If I just hard-code the <code>fileUploadContainer</code> and <code>fileUploadDropArea</code> ids in the template, it works just fine. However, I'd really like to define those ids in only one place.</p>
  
  <p>So, is there any way I can run the <code>init()</code> on the uploader after the template is linked in? I thought about using <code>$timeout</code> to delay when it runs, but that seems like a pretty big hack to me. Is there a more correct way of accomplishing this?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I wrapped the <code>init()</code> in a <code>$timeout</code> like this</p>
  
  <pre><code>$timeout(function() {
      scope.uploader.init();
  }, 2000);
  </code></pre>
  
  <p>just to make sure it would behave the way I was thinking, and sure enough, with this delay the plugin gets set up correctly and works. However, I do not want to have to rely on the timing of the <code>$timeout</code>. If there was just some way I could call <code>scope.uploader.init();</code> after the template is linked in, everything should work fine. Anyone know of a good way of doing this?</p>