Problem with pagination event calling themoviedb json with Angular

Question

I am getting an ajax response with themoviedb API. I want to call my function that gets the API response with a different page number each time the function is called.

I have managed to get the data, and I can log the correct url in the success function. However, the json that's called is not updated with the new page number, it is always the first one that was called on page load. Am I missing some functionality to reinitialize the ajax call properly with the updated url?

Here is the controller:

angular.module('MovieApp', [])
    .controller("MovieAppCtrl",
        [
            '$http', '$scope',
            function($http, $scope) {
                $scope.MovieData = [];
                $scope.Search = null;
                $scope.Key = '01b2f34add226a588438bf6e49b953d5';
                $scope.GetMoviesData = function(number) {
                    try {
                        $http({
                            url: 'https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page="'+number+'"',
                            method: "GET",
                        }).then(
                            function(payload) {
                                $scope.MovieData = payload.data;
                                console.log($scope.MovieData);
                                console.log('https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page='+number+'');
                            },
                            function(){
                                alert("Something is wrong. Please try again.");
                            });
                    } catch (error) {
                        alert("Exception occured while fetching movie data.");
                    }
                }
            }
        ]);
    angular.element(function() {
        angular.bootstrap(document, ['MovieApp']);
    });

Here, the number represents the page number added to the url's path: like so: https://api.themoviedb.org/3/movie/popular?api_key=01b2f34add226a588438bf6e49b953d5&page=2

the markup:

<div ng-controller='MovieAppCtrl'>

<div class="album">
            <div class="container">
                <div class="clearfix row">
                  <a ng-repeat="movie in MovieData.results | limitTo:100" class="video-list col-md-4" target="_blank" ng-href="">
                    <div class="card mb-4 box-shadow">
                        <img ng-src="https://image.tmdb.org/t/p/w185_and_h278_bestv2/{{movie.poster_path}}" title="{{movie.title}}" alt="{{movie.title}}" class="card-img-top">
                        <div class="card-body">
                          <h5 class="">{{movie.title}}</h5>
                          <span>Rating: {{movie.vote_average}}</span><br>
                          <span>Votes: {{movie.vote_count}}</span>
                        </div>
                    </div>
                  </a>
                </div>
                <div class="pagination check-element m-show-hide ng-hide" ng-show="checked">
                    <p class="left">You're on page: 1 of 5 <span class="total_results">(100 resultat)</span></p>
                    <p class="right pagination">
                        <span ng-click="GetMoviesData(1)">
                            <span class="page1">1</span>
                        </span>
                        <span ng-click="GetMoviesData(2)">
                            <span class="page2">2</span>
                        </span>
                        <span ng-click="GetMoviesData(3)">
                            <span class="page3">3</span>
                        </span>
                        <span ng-click="GetMoviesData(4)">
                            <span class="page4">4</span>
                        </span>
                        <span ng-click="GetMoviesData(5)">
                            <span class="page5">5</span>
                        </span>
                    </p>
                </div>
              </div>
        </div> <!-- album END  -->


</div>

Here GetMoviesData(1) sends the page number to the function to call the right page for the API path.

What am I missing?