Factory in AngularJS/Ionic return different value

Question

I am developing an app in Ionic and I am brand new on all this angular js, cordova and ionic.

The thing is that I am trying to create a service that ask to an API for a response. I make it work perfectly in the controller:

$scope.search = function(icao) {
    console.log(icao);
    $scope.forecastfuture = [];

    $http.get("http://api.wunderground.com/............../UK/"+icao+".json")
        .success(function(data, status, headers, config){

          console.log(data);
          console.log(typeof data);
          for(i=0; i<36; i++){
            var day = data.hourly_forecast[i].FCTTIME.pretty;
            var maxtemp = data.hourly_forecast[i].temp.metric;
            var mintemp = data.hourly_forecast[i].dewpoint.metric;
            var feelslike = data.hourly_forecast[i].feelslike.metric;
            var humidity = data.hourly_forecast[i].humidity;
            var windspd = data.hourly_forecast[i].wspd.metric;
            var winddir = data.hourly_forecast[i].wdir.dir;
            var sky = data.hourly_forecast[i].condition;
            var precip = data.hourly_forecast[i].qpf.metric;
            var snow = data.hourly_forecast[i].snow.metric;
            var icon = data.hourly_forecast[i].icon_url;
            console.log(day);
            console.log(maxtemp);
            $scope.forecastfuture.push({
              id: i,
              day: day,
              maxtemp: maxtemp,
              mintemp: mintemp,
              feelslike: feelslike,
              humidity: humidity,
              windspd: windspd,
              winddir: winddir,
              sky: sky,
              precip: precip,
              snow: snow,
              icon: icon});
          }


    })
    .error(function(data, status, headers, config){
      console.log(data);
    });

  }

But now I am learning to create a Factory, because I will need this to be used more than once, but the return in the factory is different than in the controller you can see a log image here:

The first one is the factory return, as you can see the data is different than the second part, that is the response in the controller directly, the http.get.

My problem is that when I try to read anything from the factory it throw an error all the time. Here you have the code for the factory:

.factory('ForecastService', function(CurrentPosition, $http){
      var wresp;
      return{
          getForecastResponse: function(country, city){
                return   $http.get("http://api.wunderground.com/api/.........../q/"+country+"/"+city+".json")
                    .success(function(data, status, headers, config){
                        console.log(data);
                    wresp = data;
                    return wresp;
                });
          },
          getDay: function(i){
            var day = wresp.hourly_forecast[i].FCTTIME.pretty;
            return day;
          },
          getMaxTemp: function(i){
            var maxtemp = wresp.hourly_forecast[i].temp.metric;
            return maxtemp;
          },
          getMinTemp: function(i){
            var mintemp = wresp.hourly_forecast[i].dewpoint.metric;
            return mintempo;
          },
          getFeelsLike: function(i){
            var feels = wresp.hourly_forecast[i].feelslike.metric;
            return feels;
          },
          getHumidity: function(i){
            var humidity = wresp.hourly_forecast[i].humidity;
            return humidity;
          },
          getWindSpd: function(i){
            var windspd = wresp.hourly_forecast[i].wspd.metric;
            return windspd;
          },
          getWinDir: function(i){
            var windir = wresp.hourly_forecast[i].wdir.dir;
            return windir;
          },
          getSky: function(i){
            var sky = wresp.hourly_forecast[i].condition;
            return sky;
          },
          getPrecip: function(i){
            var precip = wresp.hourly_forecast[i].qpf.metric;
            return precip;
          },
          getSnow: function(i){
            var snow = wresp.hourly_forecast[i].snow.metric;
            return snow;
          },
          getIcon: function(i){
            var icon = wresp.hourly_forecast[i].icon_url;
            return icon;
          }
      }

    })

and here the code in the controller to call this factory:

var forec = ForecastService.getForecastResponse("UK", "London");
var day = forec.getDay(1);

Answer 1

You are correct to return the $http call's result:

getForecastResponse: function(country, city){
  return $http.get(...)
}

This returns a promise to which you'd need to do .then (or .success for $http-specific promise, but I don't recommend it), because the response is not yet received by the time you attempted to do .getDay.

So, in the controller:

ForecastService
  .getForecastResponse("UK", "London")
  .then(function(){
     var day = ForecastService.getDay(1);
  });