In this example we can show the color picker based on the value of isColorpicker variable with ng-model directive which will set the value of checkbox to isColorpicker variable.If isColorpicker is true then color picker will show. Here is the code for ng-if ng-if="isColorPicker"

<!DOCTYPE html> <html xmlns=""> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src=""></script> </head> <body ng-app> <div ng-init="color='#0080ff'"> First Name <input type="text" ng-model="firstName" /><br /><br /> Last Name <input type="text" ng-model="lastName" /><br /><br /> Show Color Picker <input type="checkbox" ng-model="isColorPicker" /><br /><br /> <span ng-if="isColorPicker"> Color Picker <input type="color" ng-model="color" />{{color}}</span> </div> </body> </html>