AngularJS - ng-change not firing

Question

I'm setting the ng-change directive in a select element of my form but the function linked to it is not called when I change the value. I've been reading very similar questions and applying the answers I see and so far none has worked yet.

Can you see wjat I'm doing wrong?

My HTML:

<div class="row" ng-app="quoteApp">

    <div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
        <h1 class="page-header">Quote</h1>

                <div class="form-group">
                    <label>Carrier</label>
                    <select class="form-control" ng-model="form_carrier_id" ng-change="loadProducts()">
                        <option ng-repeat="carrier in carriers" value="{{carrier.id}}">{[{carrier.name}]}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Product</label>
                    <select class="form-control" ng-model="form_product_id">
                        <option value=""></option>
                        <option ng-repeat="product in products" value="{{product.id}}">{[{product.name}]}</option>
                    </select>
                </div>

    </div>

</div>

And my controller:

angular.module('quoteApp', ['angular-loading-bar']).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
    .controller('QuoteController', function ($scope, $http) {

        $scope.carriers = [];
        $scope.products = [];
        $scope.form_carrier_id = '';
        $scope.form_product_id = '';

        $scope.getUrl = function(action){return '/admin/application/quote/json?action='+ action;}

        $scope.initialize = function(){

            // Get the list of carriers
            $http.get($scope.getUrl('getCarriers'))
                .success(function (data) {
                    $scope.carriers = data;
                })
                .error(function () {
                    alert('Error loading carriers');
                });
        }

        $scope.loadProducts = function(){
            alert('HERE');
        }
    });

For me everything looks right. Can you see what I'm missing? The first select loads normally, the problem is that when I change its value the function loadProducts is not fired.

Thanks

Answer 1

I have found what was the problem. It was how I was filling the select. It has to be filled like this:

            <select class="form-control" ng-model="form_carrier_id"
                    ng-options='carrier.id as carrier.name for carrier in carriers'
                    ng-change="loadProducts()">
            </select>

Answer 2

这本身可能不是问题，但是您应该始终使用ng-options而不是<option ng-repeat>我在过去已经看到过一些奇怪的行为，因为

Answer 3

Try using ng-options for repeating the products in your select element. You can use ng-options as follows:

<select class="form-control" ng-model="form_product_id"
                ng-options="product.id as product.name for product in products" ng-change="loadProducts()">
                    <option value="">Select color</option>
                </select>

not as the products are set values, the loadProduct should trigger, whenever a value is selected as the ng-model would be set