For loop not showing in http request of factory (Ionic/Angular)

Question

I am working with ionic and the api from themoviedb.org. I wrote a factory to make a http request for the most popular movies. This works ok, I get the output of the http request in my console. But now I want to actually show the information on to my view and this is where things get a little bit difficult.

So the code for my service is the following:

 angular.module('starter.services', [])

.factory('HotMoviesService', function($http){
    var base_url = "https://api.themoviedb.org/3/movie/";
    var service = "popular";
    var movieId;
    var apiKey = "?api_key=xxxxxx";
    var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXXXXX";
    var final_url_with_movieId = "https://api.themoviedb.org/3/movie/"+movieId+"?api_key=XXXXX";

    var HotMoviesService = {};//empty object

    HotMoviesService.hotmoviesList = [];//empty array

    HotMoviesService.getHotMovies = function(){
        $http.get(final_url)
            .success(function(response){
                //console.log(response);
                var output = HotMoviesService.hotmoviesList = response
                console.log("!!!", output);

                for(var i = 0; i < output.length; i++){
                    console.log("%%% ", output.length);
                }

                return response;
            })
            .error(function(errorService){
                console.log("There was an error please check your internet connection " , errorservice);

            });
    };
    return HotMoviesService;
});

As you can see for some reason it won't log my console.log from my for loop. It just ignoring it completely. And I don't know why.

Part of my controller code:

angular.module('starter.controllers', ['ionic.contrib.ui.hscrollcards', 'starter.services'])
.controller('StartCtrl', function($scope, $http, HotMoviesService) {

    $scope.hotmovies = HotMoviesService.hotmoviesList;
    console.log("111", $scope.hotmovies)

    $scope.getHotMoviesFromFactory = function(){
        HotMoviesService.getHotMovies();
    }
    $scope.getHotMoviesFromFactory();
})

As you can see in my controller when I want to log the $scope.hotmovies it comes back undefined (see screenshot).

Part of my html view:

<ion-view view-title="The Movie Bank">
  <ion-content class="background">
    <hscroller>
        <ion-scroll direction="x" scrollbar-x="false">
            <hcard ng-repeat="hotmovie in hotmovies"> 
                <a href="#/app/hot/{{hotmovies.id}}">
                    <img src="http://image.tmdb.org/t/p/w92/{{hotmovies.poster_path}}" >
                </a>
            </hcard>
        </ion-scroll>
    </hscroller>

  </ion-content>
</ion-viewNow Playin

Answer 1

Your scope object is undefined because you are setting a hotmovieList in your service, but read a hotmoviesList in your controller (note the extra s ). At that particular point in the controller, it will always be a empty array, though.