I have set the ng-change directive in a select element within my form, but for some reason, the associated function is not being called when I change the value. I have tried various solutions from similar questions but none have been effective so far.
Can you pinpoint what I might be doing incorrectly?
This is my HTML code:
<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>
This is 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');
}
});
Everything seems correct to me. Can you identify what I may have overlooked? The first select element loads as expected, but the issue arises when I change its value, as the loadProducts function fails to trigger.
Thank you.