ngModel doen't pass data back to parent scope in directive

Question

ngModel doen't pass data back to parent scope in directive

Related Post, but didn't help: Scoping issue when setting ngModel from a directive

EDIT: ngModel and component with isolated scope didn't work either.

I got the some problem but in a more complex way i guess. I want to write a pulldown that does not use any input for data saving. I'd rather have the ngModel to take care of it.

http://jsfiddle.net/QeM6g/6/

The jsFiddel example above shows a demo where the above discriped methods didn't work.

// this is what should work but doesn't
ngModel.$setViewValue(value);
scope.$apply(attr.ngModel,value);

For some reason the scope of the ngModelController is a sibling of my scope. so it doesn't pass the changes back to the parent. at least all other sibling scopes behave as you'd expext. i.e. ng-change works in combination.

angularjs
directive

Answer 1

Angularjs doesn't deal very well with direct bindings to primitive types.

If you change this line:

$scope.productId = 16;

to something like this:

$scope.selectedProduct = {
    id: 16
}

and change those references on the rest of the code, you should be able to overcome the issue.

jsFiddle: http://jsfiddle.net/M2cL7/

Answer 2

This is a very useful article about scopes and how they work in angular if you're interested http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html