Updating table based on select option value with AngularJS - angularjs

Question

I have a drop down (select option) menu with various url query strings. Each option represents a server side query that sends back json data. What I'm trying to implement is that when the user selects an option, Angular sends a $http.get that fetches the json data and updates a table in my app. Below is a mock-up of the html with some Angular to (hopefully) clarify:
...
<select>
<option value="http://host:8000/getjsondata.jsp?var=1">option1</option>
<option value="http://host:8000/getjsondata.jsp?var=2">option2</option>
<option value="http://host:8000/getjsondata.jsp?var=N">optionN</option>
</select>
<table>
<tr ng-repeat="result in results">
<td>{{value1}}</td>
<td>{{value2}}</td>
<td>{{valueN}}</td>
</tr>
</table>
What would be the cleanest way to do this in Angular?

Answer 1

<select ng-options="obj.val as obj.txt for obj in slctOptions"
ng-change="update()"
ng-model="slctItem">
</select>
<table>
<tr ng-repeat="result in results">
<td>{{result.value1}}</td>
<td>{{result.value2}}</td>
<td>{{result.value3}}</td>
</tr>
</table>
<script>
function MyCtrl($scope, $http) {
$scope.slctOptions = [
{
val: 'a',
txt: "option1"
},
{
val: 'b',
txt: "option2"
},
{
val: 'c',
txt: "option3"
},
{
val: 'n',
txt: "optionn"
},
];
$scope.update = function () {
$http.get('http://host:8000/getjsondata.jsp?var=' + $scope.slctItem).success(function (data) {
$scope.results = data;
});
};
}
</script>