title: Twitter widget suddenly stopped working
body: <p>I have some Tweets embedded on a page in my Angular app using Twitter's <code>widgets.js</code>. They have been working for quite some time. I noticed today that they suddenly stopped working. I've been trying to debug the issue, but I can't seem to get the Tweets to load, no matter what I try. There are no errors in the console. If I manually initialize the Tweets from the console, the code appears to execute normally. I can verify this by logging something to the console within a <code>then</code> function that should only be called when the promise returned by <code>twttr.widgets.createTweet()</code> is resolved.</p>
  
  <p>In my <code>application.html.erb</code> I have the following:</p>
  
  <pre><code>&lt;!-- Twitter oEmbed Widget --&gt;
  &lt;script&gt;
      window.twttr = (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0],
          t = window.twttr || {};
          if (d.getElementById(id)) return t;
          js = d.createElement(s);
          js.id = id;
          js.src = "https://platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js, fjs);
  
          t._e = [];
          t.ready = function(f) {
              t._e.push(f);
          };
  
          return t;
      }(document, "script", "twitter-wjs"));
  &lt;/script&gt;
  </code></pre>
  
  <p>In my directive template I specify a div with the Tweet id like so:</p>
  
  <pre><code>&lt;div class="fade" ng-show="!loading" ng-if="post.provider === 'twitter'" id="{{'post_' + post.id}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then in my directive's controller, I initialize the widget after a delay to ensure that the DOM is ready, like so:</p>
  
  <pre><code>function loadWidget() {
      if($scope.post.provider === 'twitter') {
          $timeout(function() {
              if(angular.element('#post_' + $scope.post.id).find('iframe').length === 0) {
                  twttr.widgets.createTweet($scope.post.twitter_id, document.getElementById('post_' + $scope.post.id)).then(function(resp) {
                      $timeout(function() {
                          $scope.loading = false;
                      })
                  });
              };
          }, 2500);
      };
  };
  </code></pre>
  
  <p>If I insert a <code>debugger</code> within my <code>$timeout</code> block I can see that <code>angular.element('#post_' + $scope.post.id)</code> returns a valid <code>div</code> from the DOM. I can also confirm that my Tweet is on Twitter if I go to my account.</p>
  
  <p>This setup has been working fine for awhile now. I haven't made any changes to it. In fact it was working just a few hours ago! What I'd like to know is how I can debug it and figure out why it suddenly stopped working. I checked the status of the Twitter API and it says it has had 100% uptime for the past 24 hours.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I managed to reproduce the issue in a <a href="https://jsfiddle.net/t0tz7qas/1/" rel="nofollow">jsFiddle</a>. From what I can tell it seems to be a problem with the Tweets from my account I use for testing. As you can see in the Fiddle I specify two Tweet IDs - <code>tweetA</code> and <code>tweetB</code> - and then embed both of them. The first one, which is mine, fails to load. The second one loads just fine.</p>