ng-if and ng-model not working together for checkbox

Question

there is a form which have two checkbox option one is English and another one is Hindi.On the basis of language selection div(child form) will open.but i have a condition if child form or div have some value then on page load checkbox will be check and div will be on open state. Code which i try is-

     <label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true" >
                     English <input type="checkbox" ng-checked="true"><br /><br />
                 </label>

                 <label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
                     English <input type="checkbox" ng-model="ENchkselct" ><br /><br />
                 </label>

and this is my div

              <div ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true && astroProfile.LanguageId ==='EN' ||ENchkselct" ng-show="ENchkselct">

                 <div class="col-sm-6 h3"><b>English Profile Translation</b></div><br /><br /><div class="clearfix"></div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">Display First Name</label>
                     <div class="col-sm-6">
                         <input type="text" name="profileengfirstname" ng-model="astroProfile.FirstName" class="form-control" />
                         <!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengfirstname.$error.required">
                Profile First Name is required.
            </span>-->
                     </div>
                     <label class="col-sm-1 control-label" ng-if="astroProfile.FirstName=== null"><span class="label label-danger">Incomplete</span></label>

                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">Display Last Name</label>
                     <div class="col-sm-6">
                         <input type="text" name="profileenglastname" ng-model="astroProfile.LastName" class="form-control" />
                         <!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileenglastname.$error.required">
                Profile Last Name is required.
            </span>-->
                     </div>
                     <label class="col-sm-1 control-label" ng-if="astroProfile.LastName === null"><span class="label label-danger">Incomplete</span></label>

                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">Profile Description</label>
                     <div class="col-sm-6">
                         <textarea name="profileengresumetext" ng-model="astroProfile.ResumeText" class="form-control"></textarea>
                         <!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengresumetext.$error.required">
                Profile Resume Text is required.
            </span>-->
                     </div>
                     <label class="col-sm-1 control-label" ng-if="astroProfile.ResumeText=== null"><span class="label label-danger">Incomplete</span></label>
                 </div>
             </div>

this code only works when checkbox is checked on load but when i checked the checkbox it will not show the div.I am new for angularjs please guide me. I try to open div automatically if checkbox is check on load and if not then when user checked the checkbox it will show the div

Possible duplicate of [Angularjs ng-model doesn't work inside ng-if](https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if) — Durga, Jan 14 '19 at 08:18

score 1 · Answer 1 · answered Jan 14 '19 at 18:57

AngularJs creates a child $scope inside ng-if so you should use $parent object to access the parent controller $scope.

Code example:

    <label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
        English <input type="checkbox" ng-checked="true"><br /><br />
   </label>

   <label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
        English <input type="checkbox" ng-model="$parent.ENchkselct" ><br /><br />
   </label>

ng-if and ng-model not working together for checkbox

1 Answers1