title: Angularjs checkbox checked onload but gives undefined when unchecked first time inside nested ng-repeat
body: <p>I am using AngularJS, Ionic (v 1) frameworks. On load of the mobile app screen, the checkboxes are to displayed as checked &amp; then user may check or uncheck the checkboxes. The checkboxes are checked on load fine, however, when first time user unchecks a checkbox then the checkbox status value is undefined even though the checkbox is seen to be unchecked. After this when it is checked then it works fine whereby either the checkbox value is true or false depending upon if user checked it or unchecked it. Below if the html section of the code that is displaying the nested ng-repeat and checkboxes displayed. Also, there are multiple checkboxes that can be displayed and that is why second ng-repeat is used to load all the values for the checkboxes. Below the HTML code is the Javascript functions in controllers.</p>
  
  <p>The togglegroup &amp; isgroupshown functions are used to show or hide the checkboxes when the user clicks on the icon next to Extras.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form name="list" class="list"&gt;
  &lt;div ng-repeat="(i, item) in menu_items track by $index"&gt;
  &lt;div class="item item-divider"&gt;
  {{item.p_name}}
  &lt;/div&gt;
  &lt;select ng-show="item.Customizable == 1" ng-model="data.cmbIngredient[i]"&gt;
  &lt;option selected="selected" value=""&gt;Select the size&lt;/option&gt;
  &lt;option ng-repeat="x in item.ProductSizes" value="{{x}}"&gt;
  {{x.ProductName}}: €{{x.ProductPrice | number:2}}
  &lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;
  {{item.p_description}}
  &lt;/div&gt;
  &lt;!-- if the Extras value equates to 1 then the checkbox is displayed--&gt;
  &lt;div ng-show="item.Extras == 1"&gt;
  &lt;i ng-click="toggleGroup(item)" class="icon balanced icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus-round'"&gt;&lt;/i&gt; Extras
  &lt;label ng-repeat="(j, ext) in item.ExtraDetails track by $index" class="checkbox" ng-show="isGroupShown(item)"&gt;
  
  &lt;input type="checkbox" ng-checked="1" ng-change="AddExtras(data.data[j].chkextras[i],item.p_id)" ng-model="data.data[j].chkextras[i]"&gt; {{ext.CIngredientName}}
  
  &lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Controller functions</p>
  
  <pre><code>$scope.AddExtras=function(extraStatus,pid){
  if(extraStatus == true){
      //pass it to service
  }
  else if (extraStatus == false){
      //pass it to a service
  }
  };
  $scope.toggleGroup = function(group) {
  if ($scope.isGroupShown(group)) {
  $scope.shownGroup = null;
  } else {
  $scope.shownGroup = group;
  }
  };
  $scope.isGroupShown = function(group) {
  return $scope.shownGroup === group;
  };
  </code></pre>