Why is my ng-repeat acting like the object is empty?

Question

Here is my controller code:

.controller('vidController', ["$scope", "$location", "youtubeAPI", function($scope, $location, youtubeAPI) {
    if(document.getElementById('query')) { //See Note 1 Below*****
        var textElement = document.getElementById('query');
        textElement.onkeyup=function(e){ 
            if(e.keyCode==13){ //if key pressed is enter button
                console.log('Looking for ' + textElement.value + ' on YouTube');
                youtubeAPI.search(textElement.value);
                $location.path('/results'); //changes url path to results partial
                $scope.$apply();
            }
        }
    };
    // Called automatically with the response of the YouTube API request.
    window.onSearchResponse = function(response) {
        console.log(response); //Shows entire response data
        console.log(response.items[0].snippet.title); //shows video title
        console.log(response.items[0].id.videoId); //shows video Id
        console.log(response.items[0].snippet.thumbnails.medium.url); //shows video thumbnail
        $scope.videos = response.items;
        $scope.$apply();
        console.log($scope.videos); //This outputs an object with 5 Objects in it. Proof that the API is picking up something.
    };
}]);

*Note 1: I have an input text type that the user puts their search keyword into and then presses enter to run the search on it, it also changes the address when the enter key is pressed. Maybe this is causing an issue?

And here is the partial:

<ul>
    <li ng-repeat="video in videos">
    hey
    </li>
</ul>

Since i'm using the youtubeAPI, every search result brings back 5 results. console.log($scope.video) shows in the console the 5 objects, so I know it's being populated.

However whenever I go to my partial page and inspect element, the <ul> tags are completely empty. like the ng-repeat never ran.

Why would it not run? I should be seeing "hey" 5 times.

EDIT: Here's a console output of the last console.log in my code

EDIT 2: Upon request, here is where onSearchResponse is run.

angular.module('GameFindr.search', [])
.factory('youtubeAPI', [function() {

var youtubeAPI = { };

youtubeAPI.search = function(keyword) {
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: keyword,
        type: 'video',
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
    }

    return youtubeAPI;
}]);

EDIT 3: Adding $scope.apply(); after $scope.videos works if I comment out the $location.path change, and it stays on the same view. But it doesn't work when I change views. Here is my router:

angular.module('GameFindr', [
'ngRoute',
'GameFindr.controllers',
'GameFindr.search'
])

.config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/', { templateUrl: 'home.html', controller: 'vidController' }).
    when('/results', { templateUrl: 'results.html', controller: 'vidController'}).
    otherwise({ redirectTo: '/' });
 }]);

Answer 1

you are changing the the object value in callback, so by the time the value is available from callback the ng-repeat it getting run already with initial value and which is undefined in your case.

Try below code

$scope.videos = response.items;
$scope.$apply();

Ref: github $scope.$apply() called at the end, to tell AngularJS that an asynchronous event just occurred.