I've been working with Angular to loop through an array of tweet ids and display them on the page using Twitter's embed code. The issue I'm facing is that although the variable gets updated, the twitter embed remains static. Here's a glimpse of the code:
HTML:
<!--displaying the variable for testing purposes (functions correctly)-->
{{tweets[index].twitterID}}
<!--embedding twitter code around the variable above -->
<blockquote class="twitter-tweet" width="500" align="center" lang="en">
<a ng-href="https://twitter.com/user/statuses/{{tweets[index].twitterID}}"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</blockquote>
<!--button to move to the next tweet-->
<div id="btn" ng-click="increment()">Next</div>
Script:
$scope.tweets = [] //contains my tweets in JSON format
$scope.index = 0;
$scope.increment = function () {
$scope.index = $scope.index + 1;
}
The initial tweet embeds correctly, however, despite the variable being updated by the button click, the tweet itself doesn't change. Any ideas why this might be happening?