I have a scenario where I am using assigning a model value to it, automatically gets the true false value assigned to it based on whether the check box is checked or not.

<ion-checkbox class="checkbox-balanced clear-border" ng-model="DeliveryObj.shippingChecked">Same as billing address</ion-checkbox>
<div class="list list-inset" ng-if="!DeliveryObj.shippingChecked"></div>

But when I use that value to show hide a div using ng-if, it causes a flicker, the div appears and then disappears. Any reason why?

I had to go the way around using the display attribute to achieve my final functionality.

In View as:

 <ion-checkbox class="checkbox-balanced clear-border" ng-change="showShippingDetails(DeliveryObj.shippingChecked)" ng-model="DeliveryObj.shippingChecked"><label>Same as billing address </label></ion-checkbox>
 <div class="list list-inset" id="shippingDetails" hidden></div>

In controller as:

// Functionality            : Shows/hides the shipping address div
// Params                   : showDetails - true/false 
$scope.showShippingDetails  = function(showDetails){

   if(showDetails){
         // $("#shippingDetails").hide();
         document.getElementById("shippingDetails").style.display = "none";
   }
   else{
         // $("#shippingDetails").show();
         document.getElementById("shippingDetails").style.display = "block";
   }
}