Load List Card when function is Called

Hi Guys ,

I have a list card like below. I am trying to call a function (search ()) and update the list card with $scope.myVideos. Please what am i doing wrong?

<div class="list card" ng-repeat="video in myVideos" >
        <div class="item item-text-wrap">
            <h2>{{video.snippet.title}}</h2>
            <p>{{video.snippet.publishedAt | limitTo: 10}}</p>
        </div>
        <div class="item item-image">
            <div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div>
        </div>
       
    </div>

///

//Controller $scope.search = function () { $scope.youtubeParams = { key: '', type: 'video', maxResults: '10', part: 'id,snippet', q: 'LTV Lagos Television', order: 'date', };
$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParams}).success(function(response){
$scope.myVideos = response.items;
  angular.forEach(response.items, function(child){
    console.log (child);
  });

});
});