Angular - ngModel not updating when called inside ngInclude
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"*/
Read this article on angular wiki for more detailed explanation
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.
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.