Using Angular to bind a select dropdown to an AJAX request

Question

Using Angular to bind a select dropdown to an AJAX request

I have a select dropdown in HTML that has strings for display and numbers as its value. Each number is the ID of a resource that can be queries via a REST HTTP URL.

How do I bind the changing selection state of a select to a property on an Angular controller? Is it correct to use ng-change? What's the most Angularian and declarative way of doing this?

Assume for now that the select is scoped to the same controller as the function that makes the REST request.

javascript
angularjs

Answer 1

One way is to use $watch on the ng-model property in scope for the select.

$scope.selectModel='foo';
$scope.otherProperty= /* ....*/

$scope.$watch( 'selectModel', function(){
   $http.get(url, { keyName: $scope.selectModel).success(function(response) {
           $scope.otherProperty=response;
    });

})