ng-model loses dual binding inside a block having ng-if

Just noticed a problem with two-way binding inside an ng-if block.
I understand that DOM with ng-if directive does not exist if the condition is not met. In my case the condition is clearly met but still the value from a textbox does not get binded to the $scope.
Is this a known issue ?
Here is a fiddle I recreated http://jsfiddle.net/t2shwwc9/

[Izhaki]

This isn't an issue, this is how it should work. The docs explicitly refer to your case:

The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

So essentially, you bind to a primtive, and when the ngModel is set, because it is under ngIf, a new property is created on the ngIf scope.

You can solve this by wrapping your data with an object:

$scope.text = { in: "default" };

If you want a thorough understanding of what's happening, I strongly recommend reading this excellent article:

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

[caitp]

@bittuamar ng-if creates a child scope, and this causes people to shadow their original scope variable when working naively.

For instance, given the following markup:

<div ng-controller="FooCtrl">
    <div ng-if="showBar">
       <input name="bar" ng-model="bar" />
    </div>
</div>

3 execution contexts here:

- rootScope
    - FooCtrl scope
        - NgIf scope

Each child execution context can read properties from their parent context, but writing will happen in their own execution context. What this means is, whenever you type anything, the local $scope.bar will be updated and will shadow whatever was in the parent scope's bar property.

The reason this works like this, is because scopes can inherit prototypically from each other. It can be a bit inconvenient, but it works as expected.

To work around this, you can ensure that the child scope and parent scope refer to the same value, and this is usually done by inserting a wrapper object in between, like so:

<div ng-controller="FooCtrl" ng-init="model = {}">
    <div ng-if="showBar">
       <input name="bar" ng-model="model.bar" />
    </div>
</div>

Anyways, I realize this is inconvenient and confusing, but it basically works as expected.

@Izhaki @caitp thanks for that explanation. I get it now. I had an incorrect understanding about ng-if until now.