$ scope inside and outside ng-include behave differently

Question

so I did some experiment to create the ng-change behavior on 2 different selectbox while maintaining the same $ area. one of them is inside the ng-include directive, and the other is outside the ng-include directive, but the interesting part is that when I implement data binding, everything works fine, but when I tried to look at the console tab, it returns differently

the one outside the ng-include directive is fine, while inside the ng-include directive the value "a" or a static value is always returned

this is index.html layout

<select ng-model="list" ng-change="changeOutsideTemplate()"> <option value="a">A</option> <option value="b">B</option> </select> {{list}} <div ng-include="test"></div> //this scope caries test.html 

this is test.html layout

 <select ng-model="list" ng-change="changeInsideTemplate()"> <option value="a">A</option> <option value="b">B</option> </select> {{list}} 

this is the controller

 var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.test = "test.html"; $scope.list = "a"; $scope.changeInsideTemplate = function() { console.log($scope.list); //always returns 'a' } $scope.changeOutsideTemplate = function() { console.log($scope.list); //this is the correct way } }); 

this is a working example

why do you think about the cause of this problem? Does anyone want to clarify?

Answer 1

Directive

ng-include creates a new child object. here doc

when your model in ng-include html as <select ng-model="list" ng-change="changeInsideTemplate()"> and then angular will check the list model in its child area, then angular will understand that there is no list in model in ng-include child reach. then angular will create a new child model called list inside the content area.

if u really like

 <select ng-model="$parent.list" ng-change="changeInsideTemplate()"> 

then angular will check the list model in the parent scope. in the parent area, ng-include scope contains the $scope.list that we $scope.list to.

Plunker works here

---

OR you can use as shown below as @dfsq in the comment.

controller

 app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.test = "test.html"; $scope.list = {value: 'a'}; $scope.changeInsideTemplate = function() { console.log($scope.list.value); //always returns 'a' } $scope.changeOutsideTemplate = function() { console.log($scope.list.value); //this is the correct way } }); 

index.html

 <select ng-model="list.value" ng-change="changeOutsideTemplate()"> 

test.html

 <select ng-model="list.value" ng-change="changeInsideTemplate()"> 

in test.html angular will check for list.value , then angular will know that value is a property of the object, and there is no object named list in the child scope. then angular will look for the object ( list ) in the parent scope, since it will look for the entire hierarchy.

here plunker

---

if you have ng-include inside ng-include and then the second ng-include create a child area on the first ng-include

then in test.html

 <div ng-include="$parent.include"></div> // because `$scope.include` in parent scope 

and in include.html

 <select ng-model="$parent.$parent.list" ng-change="otherChanging()"> // because `$scope.list` is in parent scope of parent scope (second upper parent scope). 

here is Plunker using $ parent.

here is Plunker using Object.

use of the object is more suitable.