Angularjs ng-model doesn t work inside ng-if

Question

Here is the fiddle showing the problem  http   jsfiddle net Erk4V 1   It appears if I have an ng-model inside of an ng-if  the model does not work as expected   I am wondering if this is a bug or if I am misunderstanding the proper usage    lt div ng-app  gt       lt div ng-controller  main  gt           Test A    testa   lt br   gt          Test B    testb   lt br   gt          Test C    testc   lt br   gt            lt div gt              testa  without ng-if    lt input type  checkbox  ng-model  testa    gt           lt  div gt           lt div ng-if   testa  gt              testb  with ng-if    lt input type  checkbox  ng-model  testb    gt           lt  div gt           lt div ng-if   someothervar  gt              testc  with ng-if    lt input type  checkbox  ng-model  testc    gt           lt  div gt        lt  div gt   lt  div gt

User · Answer

We had this in many other cases  what we decided internally is to always have a wrapper for the controller directive so that we don t need to think about it  Here is you example with our wrapper    lt script src  https   ajax googleapis com ajax libs angularjs 1 2 0rc1 angular min js  gt  lt  script gt    lt script gt      function main  scope             scope thisScope    scope           scope testa   false           scope testb   false           scope testc   false           scope testd   false         lt  script gt    lt div ng-app  gt       lt div ng-controller  main  gt           Test A    testa   lt br   gt          Test B    testb   lt br   gt          Test C    testc   lt br   gt          Test D    testd   lt br   gt            lt div gt              testa  without ng-if    lt input type  checkbox  ng-model  thisScope testa    gt           lt  div gt           lt div ng-if   testa  gt              testb  with ng-if    lt input type  checkbox  ng-model  thisScope testb    gt           lt  div gt           lt div ng-show   testa  gt              testc  with ng-show    lt input type  checkbox  ng-model  thisScope testc    gt           lt  div gt           lt div ng-hide  testa  gt              testd  with ng-hide    lt input type  checkbox  ng-model  thisScope testd    gt           lt  div gt        lt  div gt   lt  div gt    Hopes this helps  Yishay

User · Answer

You can use  parent to refer to the model defined in the parent scope like this   lt input type  checkbox  ng-model   parent testb    gt

User · Answer

You can do it like this and you mod function will work perfect let me know if you want a code pen      lt div ng-repeat  icon in icons  gt                                      lt div class  row  ng-if   index   3    0   gt                       lt i class  col col-33   icons  index   n  icon   custom-icon  gt  lt  i gt                       lt i class  col col-33   icons  index   n   1  icon   custom-icon  gt  lt  i gt                       lt i class  col col-33   icons  index   n   2  icon   custom-icon  gt  lt  i gt                   lt  div gt            lt  div gt

User · Answer

You can use ngHide  or ngShow  directive  It doesn t create child scope as ngIf does    lt div ng-hide  testa  gt

User · Answer

Yes  ng-hide  or ng-show  directive won t create child scope   Here is my practice    lt script src  https   ajax googleapis com ajax libs angularjs 1 2 0rc1 angular min js  gt  lt  script gt    lt script gt      function main  scope             scope testa   false           scope testb   false           scope testc   false           scope testd   false         lt  script gt    lt div ng-app  gt       lt div ng-controller  main  gt           Test A    testa   lt br   gt          Test B    testb   lt br   gt          Test C    testc   lt br   gt          Test D    testd   lt br   gt            lt div gt              testa  without ng-if    lt input type  checkbox  ng-model  testa    gt           lt  div gt           lt div ng-if   testa  gt              testb  with ng-if    lt input type  checkbox  ng-model   parent testb    gt           lt  div gt           lt div ng-show   testa  gt              testc  with ng-show    lt input type  checkbox  ng-model  testc    gt           lt  div gt           lt div ng-hide  testa  gt              testd  with ng-hide    lt input type  checkbox  ng-model  testd    gt           lt  div gt        lt  div gt   lt  div gt    http   jsfiddle net bn64Lrzu

User · Answer

The ng-if directive  like other directives creates a child scope  See the script below  or this jsfiddle    x000D   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 0rc1 angular min js  gt  lt  script gt  x000D   x000D   lt script gt  x000D      function main  scope    x000D           scope testa   false  x000D           scope testb   false  x000D           scope testc   false  x000D           scope obj    test  false   x000D        x000D   lt  script gt  x000D   x000D   lt div ng-app  gt  x000D       lt div ng-controller  main  gt  x000D           x000D          Test A    testa   lt br   gt  x000D          Test B    testb   lt br   gt  x000D          Test C    testc   lt br   gt  x000D            obj test   x000D           x000D           lt div gt  x000D              testa  without ng-if    lt input type  checkbox  ng-model  testa    gt  x000D           lt  div gt  x000D           lt div ng-if   testa  gt  x000D              testb  with ng-if    lt input type  checkbox  ng-model  testb    gt    testb   x000D           lt  div gt  x000D           lt div ng-if   someothervar  gt  x000D              testc  with ng-if    lt input type  checkbox  ng-model  testc    gt  x000D           lt  div gt  x000D           lt div ng-if   someothervar  gt  x000D              object  with ng-if    lt input type  checkbox  ng-model  obj test    gt  x000D           lt  div gt  x000D           x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    So  your checkbox changes the testb inside of the child scope  but not the outer parent scope   Note  that if you want to modify the data in the parent scope  you ll need to modify the internal properties of an object like in the last div that I added

[angularjs] Angularjs ng-model doesn't work inside ng-if

Examples related to angularjs