title: Cannot copy data to the clipboard vanilla js/angular
body: <p>i am working in an angular project. In a controller, we have a button that is supposed to generate &amp; copy an embed code (similar to youtube) to the clipboard. However, depending on the type of the item, the embed code can only be generated/returned by an ajax call. Have a look at this code:</p>
  
  <pre><code>function copyEmbed(e) {
    var embedCode = '';
  
    if (type === "typeA"){
      api.items.compile.get({'id': item.selected.id},
        function (response) {
          embedCode = response.html; //&lt;-- takes time to populate obviously
          copyToClipboard();
      });
    } else {
        embedCode = generateEmbedCodeTemplate(); //no ajax here. populates immediately
        copyToClipboard();
    }
  
    function copyToClipboard() {
        clipboard.copyText(); // all seems good but copying will fail as this function is not invoked with a click handler!
    }
  }
  </code></pre>
  
  <p>The problem is that because of the ajax call, the code to copy the resulting embed code cannot be in the copyEmbed function scope, as this means the ajax call will not have the time to get the data before copying. If i was able to make everything synchronous, i would be able to get the data and then call the copy command from within the scope of the copyEmbed function, so it would not fail, as the copyEmbed function is bound to a click event. However, in the example, i am handling the ajax call right, but the copyToClipboard function is not invoked with a click handler so the copy command fails. Any ideas, without resulting in hacky setIntervals to check for embedCode contents?</p>