Currently, I am facing a challenge in my angular application which involves working with the soundcloud api. The issue arises when I make a call to the soundcloud api to retrieve my tracks, loop through them to extract the iframe embed object, inject it into the tracks object, and then send the entire thing as a promise to be resolved and stored in a $scope.soundcloud object. It is worth mentioning that the second call to Soundcloud API is necessary to generate the widget HTML, although I wish it wasn't required.
When this process is executed, everything seems fine as I can see the object in $scope. However, although my template successfully fetches the initial data (main track data), the template does not display the embed data even though it is present in the console log of the object.
Hence, my main concern is how I can ensure that my template is able to access the embed data so that it can be utilized with a directive or ng-bind-html? Below, I have included all of my code for reference, but feel free to ask if you require more information! Thank you all for your assistance.
HTML
<div class="track" ng-repeat="track in soundcloud.tracks">
<div class="front">
<img src="app/img/loading.gif" />
</div>
<div class="back" ng-bind-html="{{track.oembed}}">
</div>
</div>
Angular Service
getTracks: function(){
var deferred = $q.defer();
var promise = deferred.promise;
SC.get("/me/tracks", function(tracks){
$.each(tracks, function(k, v){
if(v.sharing != 'private'){
SC.oEmbed(v.uri, function(oembed){
v.oembed = $sce.trustAsHtml(oembed.html);
});
} else {
v.oembed = null;
}
});
deferred.resolve(tracks);
});
return $q.all({tracks: promise});
}
Angular Controller
.controller("GridCtrl", ['$scope', 'Soundcloud', function($scope, Soundcloud){
// Initialize the Soundcloud SDK configuration
Soundcloud.initialize();
// Retrieve tracks from Soundcloud
Soundcloud.getTracks().then(function success(results){
// Store tracks in the $scope
$scope.soundcloud = results;
console.log(results);
});
}]);