javascript - ng-model not being updated outside of the scope -

i binding ng-model input, value of variable it's bound not being updated outside of div directive declared:

<div input-field      ng-if="starttypes.selected.value == 'localdate' || starttypes.selected.value == 'localdatetime'">   <input id="date" type="text" ng-model="date" input-date>   <label for="date">date</label>   date inner scope: {{date}} </div> date outer scope: {{date}} 

when selecting new date, ony inner date updated. outer 1 remains old value (which might either undefined or not depending if declared in controller, doesn't matter).

i using angular-materialize, not sure if source of issue doesn't make sense because specific framework angular work css framework materializecss.

this component using.

edit:

i have tried declaring date in controller $scope.date = new date() , indeed current date loaded in date picker. when date selected , model changes, it's updated locally (inner scope), while in outer scope old value remains.

as ng-if creates child scope prototypically inherited current scope while inserting inner template dom, hence in case ng-model getting created inside ng-if's child scope. happening while creating child scope carries primitive datatype values & reference(object) datatypes values child scope, thats why can see outer scope date getting value inside ng-if date field(only first time). when update value in date not see value gets updated outer scope. because way child scope has create primitive type value not carry references, objects carried references. can create object $scope.model = {} & define property it, work. because object carried references child scope, updating inner object sync outer object well(they both same). rule called dot rule can fix issue.

$scope.model = {}; $scope.model.date = new date(); 

---

more convenient way avoid such kind of scope hierarchy using controlleras pattern while using controller on html. in case shouldn't using $scope instead bind properties controller function context (this). thereafter when using controller can use alias of controller values of controller ng-controller="myctrl vm"(here vm alias of controller has information binding this)

html

<div input-field      ng-if="vm.starttypes.selected.value == 'localdate' || vm.starttypes.selected.value == 'localdatetime'">   <input id="date" type="text" ng-model="vm.date" input-date>   <label for="date">date</label>   date inner scope: {{vm.date}} </div> date outer scope: {{vm.date}}