AngularJS - o controlador não obtém dados do serviço ao usar $ http

Eu tenho um aplicativo web simples, onde eu gosto de carregar alguns dados do json. No momento, os dados são codificados no meu serviço e tudo está funcionando.

Quando altero meu serviço para carregar os mesmos dados de um arquivo json externo, o controlador processa a exibição antes de obter alguns dados.

É assim que parece agora:

function() {
var tripsService = function() {

var trips = [{ .... SOME DATA }];

this.getTrips = function() {
            return trips;
        };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

Usando $ http.get:

function() {
var tripsService = function() {

 var trips = [];

this.getTrips = function() {

$http.get('trips.json').success(function (data) {
            var trips = data;
            return trips;
           });
     };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

Aqui está o meu Plunker:

plnkr

O que posso fazer para mudar isso? Li algo sobre a adição de propriedade de resolução ao meu routeProvider, mas não consegui resolver o problema!

Atualização: Talvez minha descrição não tenha sido suficientemente precisa e eu precise aprender um pouco mais sobre como lidar com dados! Os dados do json devem ser carregados apenas uma vez, para que qualquer alteração na exibição não recarregue o arquivo json original.

obrigado

questionAnswers(2)

yourAnswerToTheQuestion