PhoneGap: angularjs data appear in browser, not in mobile

Like the title say, i'am in the development of an hybrid app using Phonegap + Ionic. I have some angularjs code and the data appear perfectly in the browser but when i test the app in Genymotion (or in a real mobile) doesn't appear.

Here is the html part:

    <div class="wod-content-training padding-h4">
        <div ng-repeat="sport in training.exercises" class="training no-padding clear-fix roboto-l">
            <div class="icon-full w-12" ng-class="sport.image"></div>
            <div class="font-9pt relative flexcenter-h-v w-14">{{sport.count}}</div>
            <div class="text-right font-9pt relative text-vcenter w-52">&#60; {{sport.name}} &#62;</div>
            <div class="icon-full whiteblue-eye w-08"></div>
        </div>
    </div>

Tell me if you need something about the angularjs code but i think is not important at all. Becouse the code is working in the browser, so the problem is something about PhoneGap (or Cordova) maybe.

Here an image example that show how appear that html part in the browser:

And in the mobile is just empty.

Anybody know something about this? what can be the problem? Sorry if my english is not perfect.

Thanks in advance

UPDATE:

Here is the angularjs to understand how i get the sports part:

app.factory('trainingExercises', ['$q', '$timeout', '$http', function($q, $timeout, $http) {
    var exercises = {
        fetch: function() {
            var deferred = $q.defer();
            $timeout(function() {
                $http.get('/resources/training.json').success(function(data) {
                    deferred.resolve(data);
                });
            }, 30);
            return deferred.promise;
        }
    }
    return exercises;
}]);

app.controller('freeWODController', ['$scope', '$location', 'trainingExercises', function($scope, $location, trainingExercises) {
    $scope.pageTitle = 'WOD Libre';
    trainingExercises.fetch().then(function(data) {
        $scope.training = data;
    });
}]);

and the training.json here:

{
    "exercises": [
        {   
            "name": "Overhead squat",
            "image": "green-overhead-squat", 
            "count": "10"
        },
        {
            "name": "Ring dip",
            "image": "whiteblue-ring-dip", 
            "count": "10"
        },
        {
            "name": "Toes to bar",
            "image": "blue-toes-to-bar", 
            "count": "20"
        },
        {
            "name": "Ring dip",
            "image": "whiteblue-ring-dip", 
            "count": "10"
        },
        {
            "name": "Toes to bar",
            "image": "blue-toes-to-bar", 
            "count": "20"
        }
    ]
}

UPDATE 2:

Thanks to jcesarmobile for recommend me GapDebug tool, which is really good for debugging apps by PhoneGap, and work with Genymotion too!

So now i have what is the problem, but don't know how to solve this at all. This line:

$http.get('/resources/training.json')

That is in www/js/app.js and the training.json is in www/resources/training.json so i tried:

$http.get('../resources/training.json')

But nothing. In the GapDebug i can see the FILE_NOT_FOUND for the training.json becouse the location path that is trying to get is: file:///android_asset/resources/training.json

How to properly set the location path in app.js?

Thanks!