AngularJS Ajax - problem

I am a bit new to angular and I am scratching my head over this. my factory console.log

show that the first time through everything is defined correctly, but the factory for some reason overestimates the data that I pass it to undefined

. Here is my code, starting with html input, which passes data to the controller and then to the factory:

HTML:

<input type="text" placeholder="Enter Channel" ng-model="channel" ng-keydown="$event.which === 13 && cname(channel)"/>

      

        
        
        
      

    

This will send to my controller what is entered in the input field after pressing enter cnam(channel)

Controller and factory:

angular.module('youtubePlaylistAppApp')
  .factory('ytVids', function($http){

    return{
        getChannel: function(name){
            console.log('name: '+name);
            var url = 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+ name +'&key=[my api key]';
            console.log(url);
            return $http.get(url);
        },
        getVids: function(channel){
            console.log('channel: '+ channel);
            return     $http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId='+channel+'&key=[my api key]')
            .success(function(response){
                //console.log(response.items);

                return response.items;
            });

        }
    };
  })
  .controller('indexCtrl', function ($scope, ytVids) {
     $scope.cname = function(channel){
        console.log(channel);
        ytVids.getChannel(channel);
        ytVids.getChannel().success(function(response){
        console.log(response);
        console.log(response.items[0].contentDetails.relatedPlaylists.uploads);
        ytVids.getVids(response.items[0].contentDetails.relatedPlaylists.uploads)
        .success(function(data){
                console.log(data.items);
                $scope.ytChannel = data.items;
            });
        });
    };
  });

      

        
        
        
      

    

Here is the result that I see in my console developer tools after pressing enter while typing in an input field:

first console log the console.log(channel);

console logs the correct answer. If I type "freddiew" and hit enter, this is what is registered

Then I pass that to my factory ytVids.getChannel(channel);

and the console log to the factory console.log('name: '+name);

. This leads to the correct answer, as inname: freddiew

Then I declare a variable var url =

and give it url url and append the channel name to the url

Then I console register the variable and get the expected https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=freddiew&key=[my api key]'

This url works when I tried it in postman and just hardcoded the name, but by omitting the name, the console then spits out some more logs, which I don't know why, and it looks like it overrides the url I just built to call. because this is what is written in the factory:

name: freddiew

https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=freddiew&key=[my key]

Then it registers after that as undefined

, and the api calls concats undefined

with the url and makes an api call with that undefined

url

name: undefined

https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=undefined&key=[my key]

forUsername=

is the name of the channel.

does anyone know why it is defined as undefined

?