Soundcloud API + ng-repeat not populating view completely

Question

I'm coding a site for my friend's band that uses Angular as well as the SoundCloud API and I have not been able to get past this one problem.

In my first controller I was able to update the view with expressions populated by the soundcloud users JSON with a simple $http.get.

In my second controller, I wanted to grab each track + the track stats and put them in their own html paragraph with ng-repeat. However, when I do this, ng-repeat loops the appropriate amount of times (45X) yet only 3 of the created elements are populated with the track info. There are about 40 blank elements then the first three songs displayed as they should be followed by another blank section.

Here is my code:

(function(){

angular.module("ninety", [])

  .controller("bandInfo", ['$http', function($http){
   
    var ninetystuff = this; 
    ninetystuff.data = [];
    $http.get('https://api.soundcloud.com/users/23749941.json?client_id=b4809581f93dc4d3308994300923b660').success(function(data){
      ninetystuff.data = data;
    });
 
  }])
  
  .controller("music", ['$http', '$scope', function($http, $scope){
     
    var ninetyshit = this;
    ninetyshit.data = [];
    $scope.show = false;
    
    SC.initialize({
      client_id: "b4809581f93dc4d3308994300923b660"
    });

    SC.get('/users/23749941/tracks').then(function(tracks){
      ninetyshit.data = tracks;
      $scope.show = true;
    });
   
    $scope.playTrack = function(track) {
      SC.oEmbed(track, {
        auto_play: true,
        maxheight: 200
      }).then(function(embed){
        $("#player").empty();
        $("#player").append(embed.html);
      });
    }; 
   
  }])

  .directive('scrollToPlayer', function() {                                              
    return {
      restrict: 'A',
      link: function(scope, $elm, attr) {
        $elm.on('click', function() {
          $('html,body, #bg').animate({scrollTop: 400 }, 1000);
        });
      }
    };
  });

})();

I've tried creating a service to handle the promise returned from the 'GET' request but I had the same result.

Answer 1

I finally figured it out, I was parsing through the JSON data the wrong way. I should have provided my html code in the question. I was using ng-repeat through the data[0] array (ie - ng-repeat="index in data[0]") when I simply needed to loop through the returned data itself (ie- ng-repeat="index in data"). Silly mistake, I definitely over complicated things for myself. The fact that the wrong solution I was using displayed some but not all of the tracks made me falsely believe I was looping correctly when I wasn't.

Hope this helps any Angular noobs who are having similar issues. Lesson learned.