CODEWITHSUNDEEP
angularjsdrop-down-menuangular-ngmodelng-optionsangularjs-digest
Kangze Huang
Kangze Huang

Reputation: 351

ngOptions successfully refreshes with new values, but ng-model is not data-binding

I have 2 select forms populated using ng-options, such as:

<select ng-options="item.id as product.category for product in products" ng-model="order.category" ng-change='find_brands(order.category)' ></select>
<select ng-options="brand.id as brand.name for brand in brands" ng-model="order.brand" ></select>
<button ng-click='Get_Products(order)>ORDER</button>

When the first dropdown is selected, it will trigger a $http call to populate the second dropdown like so:

$scope.find_brands = function(category){
  $http
    .get('Default.aspx/Find_Brands', {category: category})
    .success(data){$scope.products = data.d};
};

This correctly populates the "brands" dropdown with the new values. However, when I go to select a brand, the ng-model does not change. When tested, I receive a null value. I've looked into $scope.$apply to work with the $digest cycle, but it seems like that is not my problem (the "brands" dropdown successfully gets refreshed data, it just doesn't SEND data out).

Does anyone have an idea of whats going on and how to fix it?

Upvotes: 0

Views: 102

Answers (1)

eliagentili
eliagentili

Reputation: 619

I've been creating this simple example for you: http://jsbin.com/degece/edit?html,js,console,output

In your code there are some errors.

In this line you use item.id instead product.id 

<select ng-options="item.id as product.category for product in products" ng-model="order.category" ng-change='find_brands(order.category)' ></select>

In this you have a quote typo, you don't need the quote before Get_Products 

<button ng-click='Get_Products(order)>ORDER</button>

Finally, here you need to assign the result of the call to the $scope.brands variable 

.success(data){$scope.products = data.d};

In my example you can see some best practice implementations like the model initialization.

Upvotes: 1

Related Questions