ng-model doesn't work with ng-if

[adamkdean]

If you have something bound with ng-model but you also have ng-if on that element, the binding doesn't seem to work.

With ng-if:

<p ng-init="test='hello'">
    <input type="text" ng-if="test" ng-model="test">
    <span ng-bind="test"></span>
</p>

Without ng-if:

<p ng-init="test='hello'">
    <input type="text" ng-model="test">
    <span ng-bind="test"></span>
</p>

Example plunkr:

http://plnkr.co/edit/cRfXlpKWtgnE0D6HMVGn?p=preview

[adamkdean]

Related: http://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if

Would be nice to have it not work this way though.

[adamkdean]

Works:

<p ng-init="test='hello'">
    <input type="text" ng-if="test" ng-model="$parent.test">
    <span ng-bind="test"></span>
</p>

😭

[lord2800]

That sounds correct to me--ng-if creates a new scope, and you're running into scope inheritance issues. Using anything.test (where anything is an object on the correct scope) instead of just test would also work.