Displaying object properties in AngularJS

Try console.log(JSON.stringify(list.tracks));

I made a directive to log object or array with angular

Set $rootScope.debug = true to make it displayed ! ( or remove the ng-if="$root.debug" in the view )

Usage :

<dir.log dlog="test" dtitle="test from controller"></dir.log>

In your controller

$scope.test = { genres: ["male"],id: 84,title: "name" }

The directive code

var directives = angular.module('directives', []);
directives.directive("dir.log", function () {
   return {
      restrict: 'E',
      replace: false,
      scope: {
         dlog: '=', // what object or array to log
         dtitle: '@' // the title displayed on hover of the show/hide button

      },
      controller: function ($scope, $rootScope) {
         $scope.logshow = false ;       
      },
      templateUrl: "partials/elements/log.html"
   }
});

the html code

<div ng-if="$root.debug" class="text-left">     
        <button tooltip-placement="right" uib-tooltip="log debug {{dtitle}}" ng-hide="logshow" ng-click="logshow=true;" class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-collapse-down"></span></button>
        <button tooltip-placement="right" uib-tooltip="log debug {{dtitle}}" ng-hide="!logshow" ng-click="logshow=false;" class="btn btn-default btn-xs ng-hide" type="button">
            <span class="glyphicon glyphicon-collapse-up"></span>
        </button>
        <pre ng-if="logshow"><span ng-show="dtitle!=null">{{dtitle}}:<br></span>{{dlog |json}}</pre>

</div>

I have used $scope and its working in this way.

html

<div ng-app="ListTracksApp" ng-controller="MusicController">
      <h3>Music Tracks</h3>
          <div ng-repeat="track in tracks" class="trackInfo">
                <span class="trackName" style="font-size: 32px;">{{track.title}}</span>
                <div class="rating">{{ track.rating }}</div>

        </div>
    </div>

angular file

(function () {
var myApp = angular.module('ListTracksApp', []);
myApp.controller('MusicController', MusicController);
myApp.service('MusicService', MusicService);
MusicController.$inject = ['MusicService','$scope'];

function MusicController(MusicService,$scope){
  var vm = $scope;
  vm.name="test";
  var promise = MusicService.getTracks();
  //console.log(promise);
  promise.then(function(response) {
    vm.tracks = response.data.results;
    console.log(vm.tracks);
    //console.dir(list.tracks);
  })
  .catch(function(error){
    console.log("Something went wrong!");
  });

}


MusicService.$inject = ['$http'];
function MusicService($http) {
  var service = this;
  service.getTracks = function(){
    var response = $http({
      method: "GET",
      url: "http://104.197.128.152:8000/v1/tracks"
    });
    return response;
  };
}
})();