Atualização de view, carregamento de nova requisição http com AngularJS

Front-end JavaScript
#1

Olá, eu queria entender melhor como funciona a atualização de dados numa view. Por exemplo, eu tenho uma busca de videos na API do google, mas eu não sei como atualizar a cada nova busca, qundo eu clico no botão para buscar mai resultados, não carrega com os dados da nova busca:

    app.controller('youtubeController', function($scope,$http,$filter) {
    $scope.youtubeData = [];
    $scope.nextPage = "";
    $scope.youtubeSearchText = "";
    $scope.getYoutubeData = function(searchText){
        $http.get('https://www.googleapis.com/youtube/v3/search', {
            params: {
                key: "AIzaSyBahF7YmvpZiMBziQXy21Uhe44URp2yPHE",
                part: 'contentDetails',
                type: 'video',
                maxResults: '12',
                pageToken: $scope.nextPage ? $scope.nextPage : '',
                part: 'id,snippet',                
                fields: 'items/id,items/snippet/title,items/snippet/description,items/snippet/thumbnails/default,items/snippet/channelTitle,nextPageToken,prevPageToken',
                q: 'searchText'
            }
        }).then( function (response) {
            if (response.data.items.length === 0) {
              $scope.youtubeData = 'No results were found!';
            }
            $scope.youtubeSearchText = searchText;
            $scope.youtubeData = response.data.items;
            $scope.nextPageToken = response.data.nextPageToken;
            $scope.prevPageToken = response.data.prevPageToken;
        },function (error){
            console.log("erro");
        });
    };

    $scope.checkDataLength = function(data){
        return (data.length >=1);
    };

    $scope.callNextPageFn = function(nextPage){
        $scope.nextPage = nextPage;        
        $scope.getYoutubeData($scope.youtubeSearchText);
       console.log($scope.getYoutubeData($scope.youtubeSearchText))
    };
     
});

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:100px;"> 
	 <form class="form">
	  	<input type="search" class="form-control" ng-model="youtubeSearchText" ng-change="getYoutubeData(youtubeSearchText)" name="busca-videos" id="busca-videos" placeholder="Buscar...">
	</form>
</div>
#2

Monsta a estrutura do html como tabela ou lista e da um ng-repat in youtubeData que é o seu array de valores.

https://docs.angularjs.org/api/ng/directive/ngRepeat

#3

Eu fiz isso, mas devo ter feito alguma errada nesse controller que depois que digita e digita novamente ele não carrega uma nova busca:

HTML

    <topo></topo>
<busca></busca>
<pagination></pagination>
<div ng-if="checkDataLength(youtubeData)">
    <div class="panel-body">
      <div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="data in youtubeData">
        <div class="media">
            <a class="thumbnail pull-left" target="_block" href="https://www.youtube.com/watch?v={{data.id.videoId}}">
                <img alt="{{data.snippet.title}}" src="{{data.snippet.thumbnails.default.url}}" width="120" height="90">
            </a>
            <div class="media-body">
                <a target="_block" class="vidTitulo" href="https://www.youtube.com/watch?v={{data.id.videoId}}">{{data.snippet.title}}</a>
                <p><i class="fa fa-eye lista" aria-hidden="true"></i> Views</p>                
            </div>
        </div>
       </div>
    </div>
</div>