Angular $http.get changes from select box - angularjs

Question

I'm not sure if this is going to make sense, I spent some time trying to research the answer I require.
I'm wanting to know if it is possible in angular to change the URL requested from a $http.get request from a value of a select box.
So I have built a simple controller which gets a JSON file and passes the response in to the scope, then I pass that data in to the view.
But I will have several JSON files which I want to load on selection of an option from a drop down and reload the data.
My Angular is fairly basic, so i'm unsure if this is at all possible to do on the fly?
var app = angular.module('serverstats', []);
app.controller('ServerController', function($scope, $http){
var apiFeed = $('.apiSelecter').val();
$http.get(apiFeed).then(function(response){
$scope.status = response.data;
$scope.server = [];
angular.forEach($scope.status.servers, function(svr) {
$scope.server.push(svr);
})
console.log('server', $scope.server);
});
});
<select class="apiSelecter">
<option value="/test.json">Data File 1</option>
<option value="/test1.json">Data File 2</option>
<option value="/test2.json">Data File 3</option>
</select>
<div ng-controller="ServerController" id="server-stats" class="server-stats">
<div ng-repeat="stat in server" class="container" ng-cloak>
<div class="stats-box col-md-2">
<p class="lead">Server Name: {{ stat.serverName }}</p>
</div>
<div class="stats-box col-md-2">
<p class="lead">Response Time: {{ stat.responseTime }}</p>
</div>
<div class="stats-box col-md-2">
<ul>
<p class="lead">Ports</p>
<li><p class="lead">{{ stat.ports.port1 }}</p></li>
<li><p class="lead">{{ stat.ports.port2 }}</p></li>
<li><p class="lead">{{ stat.ports.port3 }}</p></li>
<li><p class="lead">{{ stat.ports.port4 }}</p></li>
<li><p class="lead">{{ stat.ports.port5 }}</p></li>
</ul>
</div>
Apologies now included code

Answer 1

Of course you can.
HTML :
<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
<option ng-repeat="o in options" value="{{o.url}}">{{o.label}}</option>
</select>
And in your controller
$scope.options = [
{url : 'www.google.com', label: 'google'},
{url : 'www.facebook.com', label:'facebook'}
]
$scope.myMethod = function() {
console.log($scope.myValue);
//HTTP Resquest here
}
The ng-change attribute will trigger when you change the selected option. The ng-model allows you to store the current value in memory.
After your HTTP request (in then .then) you can load your JSON and all the stuff you do.
NB : if your select is a Materialize one, use the angular-materialize library and use
<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
<option ng-repeat="o in option" value="{{o.url}}" material-select watch>{{o.label}}</option>
</select>