How to properly create a controller to display information from JSON?

Question

API

Good afternoon. Please help me figure out where is the error in my code? hannation.me/api/buddypressread/friends_get_friend... this is my json file - when i try to get the given list nothing comes out. There are no errors and nothing works.
Created this controller

// Friends Controller
.controller('FriendsCtrl', function($scope, $rootScope, $state, $ionicLoading, PostService) {
  $scope.posts = [];
  $scope.friends = [];
  $scope.page = 1;
  $scope.totalPages = 1;

  $scope.doRefresh = function() {
    $ionicLoading.show({
      template: 'Loading posts...'
    });

    //Always bring me the latest posts => page=1
    PostService.getUserFriends(1)
    .then(function(data){

      $scope.totalPages = data.pages;
      $scope.posts = PostService.shortenPosts(data.posts);

      $ionicLoading.hide();
      $scope.$broadcast('scroll.refreshComplete');
    });
  };

  $scope.loadMoreData = function(){
    $scope.page += 1;

    PostService.getUserFriends($scope.page)
    .then(function(data){
      //We will update this value in every request because new posts can be created
      $scope.totalPages = data.pages;
      var new_posts = PostService.shortenPosts(data.posts);
      $scope.posts = $scope.posts.concat(new_posts);

      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };


  $scope.doRefresh();

})

This is my service file it makes a request variable
WORDPRESS_API_URL = hannation.me/api

this.getUserFriends = function(friends){
    var deferred = $q.defer();

      $http.jsonp(WORDPRESS_API_URL + 'buddypressread/friends_get_friends/?username=adminara' +
    '&insecure=cool' +
      '&type=full' +
      '&callback=JSON_CALLBACK')

  .success(function(data) {
      deferred.resolve(data);
    })
    .error(function(data) {
      deferred.reject(data);
    });

    return deferred.promise;
  };

And this is the output on the page!

<ion-list ng-repeat="friend in friends">
      <ion-item>
        <ion-avatar item-left>
          <img class="friends-avatar" src="{{friend.avatar}}">
        </ion-avatar>
        <h2>{{friend.friends.username}}</h2>
        <h3>{{friend.mail}}</h3>
      </ion-item>
    </ion-list>

Please tell me where did I go wrong? What to fix? I am a beginner and just learning and I would like to understand the problem so that in the future I know how to solve it!