Angular - ngModel not updating when called inside ngInclude

Question

First and foremost, the plunker: http://plnkr.co/edit/v1uTz5

This is a working demo of the issue I am running into.

I have a ng-include to include a partial.

Inside the partial I have an text input with ngModel AND directive.

The model updates accordingly inside the include, but any interaction outside the include is ignored. The {{test}} outside the include doesn't update, but the {{test}} inside does.

The directive, when called, handles the enter key and calls the correct scope and function. However, the $scope.test variable has never been updated, but $scope.testFinal is updated and the ng-include template renders it appropriately. Trying to reset the $scope.test model does not work either.

Am I missing something here? Or is this a bug with the directive or with the ng-include?

See http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include — Mark Rajcok, Apr 10 '13 at 22:45

score 31 · Accepted Answer · edited Aug 13 '13 at 23:04

31

Instead of using a primitiive to define the variable, make it an object.

$scope.model={test:''};

Directives create their own scope for each item. When you equate a primitive to a new scope variable, it has no binding to the original, however when original is an object, a reference is created , not a copy, and changes made in one will reflect in the other

Simple explanatory example:

var a ='foo';
var b= a;
/* now change a*/
a='bar';
alert( b) // is still 'foo'

now do the same with object:

var obj_1= {a:'foo'};
var obj_2=obj_1;
/* now change obj_1.a*/
obj_1.a='bar';
alert( obj_2.a) // change to obj_1 will also change obj_2 and alert returns "bar"*/

Your Plunker Modified

Read this article on angular wiki for more detailed explanation

edited Aug 13 '13 at 23:04

7hi4g0

3,729
4
22
32

answered Apr 10 '13 at 21:56

charlietfl

170,828
13
121
150

1

Very simple, and I knew this all along, but I never understood the reason. Thanks for the article. It should definitely get more rep on their site. – Tim Withers Apr 10 '13 at 23:44
Thanks, you saved several my hours. – Nika Tsogiaidze Mar 10 '15 at 12:48
The angular wiki link is no longer valid. – Neel Jun 24 '15 at 21:03
This is the only solution that actually worked for me. Using this.varName or $parent.varName does nothing. Thank you! – Sam Oct 07 '15 at 19:30

score 5 · Answer 2 · answered Aug 13 '13 at 22:56

John Lindquist has a video about it. Although he doesn't quite explains why you need to use an object.

Basically every time there is a new non-isolated scope, every property of the parent scope is copied to the new scope and, as @charlietfl explained, copying a primitive type really creates a "copy" but with objects what you get is a reference, hence the changes are global.

score 1 · Answer 3 · answered Jun 22 '15 at 08:20

1

ng-include creates its own scope and it is different than outer scope. Use this.test instead of $scope.test inside ng-include template. It will work properly.

answered Jun 22 '15 at 08:20

Rahul Jha

874
1
11
28

Angular - ngModel not updating when called inside ngInclude

3 Answers3

Linked