How can I send the dropdown value on selection to pass as a parameter to another function within the same controller; angular

Question

I have a dropdown list, the idea is to click the first dropdown list and once the value is selected it should get sent to call a function which produces a list in another dropdown list. I have both functions working in angular. The problem is how do I call a function as soon as the option is selected in the first dropdown. Here is the hTML:

    <center>
    <select type="submit" ng-submit="save()" ng-model="category">
        <option size=50 value="" selected>Select a meta category</option>
        <option ng-repeat="meta in metas.metas" value="{{meta}}">{{meta}}</option>
    </select>
</center>
<center>
    <select ng-model="category1">
        <option size=50 value="" disabled selected>Select a category</option>
        <option ng-repeat="category in categories.categories" value="{{category}}">{{category}}</option>
    </select>
</center>

AngularJs:

.controller('PostCtrl', function ($scope, $http) {})

.controller('UserListCtrl', function ($scope, $http) {
$scope.list = function () {
    $http.get('http://94.125.132.253:8001/getuncategorisedplaces').success(function (data) {

        $scope.places = data;
        console.log(data);
        $scope.message = 'List of Uncategorised places';
    })
}
$scope.list();
$scope.meta = function () {
    return $http.get('http://94.125.132.253:8000/getmetas').success(function (data) {

        $scope.metas = data;
        console.log($scope.category);
        console.log(data);
        $scope.message = 'List of Uncategorised places';

    })
}


$scope.meta1 = $scope.meta().then(function (data) {
    var formdata = {
        'category': $scope.category,
    }
    var inserturl = 'http://94.125.132.253:8000/getcategories?meta=' + formdata.category;
    return $http.get(inserturl).success(function (data) {

        $scope.categories = data;
        console.log(formdata.category);
        console.log(data);
        $scope.message = 'List of Uncategorised places';
    });
});

There are no errors in the console as there is nothing happening as I select the options, I have tried onchange="function()". But I get error stating that the function is not recognised. I have taken that out of the code as it did not work and is not suitable. I need the first dropdown to call then function in $scope.meta1 once the the user selects a meta category from the first list

Answer 1

you have to watch your model, and launch your function when it is changed, something like

$scope.$watch('category', function(newvalue) {
                $scope.meta()
            });

you can also use ng-change on your select like

ng-change="meta()"