Angular js select 2 change ajax url

Question

I am using Angularjs + select 2. I have to dynamically change the Ajax URL to get the auto complete values based on the filter

Example :

I have 3 different API URL,

Movie, 
Song,
Image  

If the user option is movie then request should go to the movie REST API.

I have followed this URL : select2 change ajax url

and did the below in Angular js

$scope.getbaseURL = function () {
    $scope.baseurl = GENERAL_CONFIG.WebApi_Base_URL[$scope.type];
    return $scope.baseurl;
}

$scope.multi = {
    minimumInputLength: 5,
    ajax: {
        headers: {
            'Content-Type': 'application/json'
        },
        url: $scope.getbaseURL() + "Lookup?lookup=Lookupvalue",
        data: function (term, page) {
            return {
                key: term
            }; // query params go here
        },
        results: function (data, page) {
            return {
                results: data.LookupValue
            };
        }
    },
    dropdownCssClass: "bigdrop"
}

Where my $scope.type is a dropdown with

image , 
Movie 
Song 

But it is not changing the BASE URL dynamically or based on the type selection.

GENERAL_CONFIG.WebApi_Base_URL[$scope.type] is a collection of the REST URL from the config file

Can any one help me, Thanks

Answer 1

The configuration parameter for url should be a function if you want it to be dynamic. Try this:

$scope.getbaseURL = function () {
    $scope.baseurl = GENERAL_CONFIG.WebApi_Base_URL[$scope.type];
    return $scope.baseurl + "Lookup?lookup=Lookupvalue";
}

$scope.multi = {
    minimumInputLength: 5,
    ajax: {
        headers: {
            'Content-Type': 'application/json'
        },
        url: $scope.getbaseURL,
        data: function (term, page) {
            return {
                key: term
            };
        },
        results: function (data, page) {
            return {
                results: data.LookupValue
            };
        }
    },
    dropdownCssClass: "bigdrop"
}