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

Question

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

EDIT: Can I use ng-model 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 jsFiddle example above shows a demo where the above described 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 expect. i.e. ng-change works in combination.

Answer 1

Don't bind to primitives in a scope, bind to an object in the scope.

From https://github.com/angular/angular.js/wiki/Understanding-Scopes

... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models

so

<input ng-model="tweetText">

becomes

<input ng-model="tweet.text">

A great summary is here:

https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m