I'm working on a mobile app using AngularJS as a framework, currently I have a structure similar to this:

app.config(['$routeProvider', function($routeProvider) {

    $routeProvider

        .when('/', {

            templateUrl : 'pages/home.html',

            controller  : 'homeCtrl'

        })



        .when('/one', {

            templateUrl : 'pages/one.html',

            controller  : 'oneCtrl'

        })



        .when('/two', {

            templateUrl : 'pages/two.html',

            controller  : 'twoCtrl'

        });

}]);



app.controller('homeCtrl', ['$scope', function($scope) {



}]);



app.controller('oneCtrl', ['$scope', function($scope) {



}]);



app.controller('twoCtrl', ['$scope', function($scope) {



}]);

And then I'm displaying the content with an ng-view:

<div class=ng-view></div>

Things are working well but I need to load data from a JSON file to populate all the content of the app. What I want is to make and an AJAX call only once and then pass the data through all my different controllers. In my first attempt, I thought to create a Service with an $http.get() inside of it and include that in every controller, but it does not work because it makes a different ajax request everytime I inject and use the service. Since I'm new using angular I'm wondering what is the best way or the more angular way to achieve this without messing it up.

Edit: I'm adding the code of the service, which is just a simple $http.get request:

app.service('Data', ['$http', function($http) {

    this.get = function() {

        $http.get('data.json')

        .success(function(result) {

            return result;

        })

    }

});