Show Hide div area in Angular JS

This is my second post on angular js.

In this post I have create 2 radiobutton and will show hide a div area on basis of selection.

Create a “AngularModelController.js” file and write below code:

/// <reference path=”angular.min.js” />
var myApp = angular.module(‘angularApp’, [])
myApp.controller(“angularController”, function ($scope) {
    $scope.message = “This is my Angular JS post”;

Below is the complete html code.

<html xmlns=””>
    <script src=”Scripts/angular.min.js”></script>
    <script src=”Scripts/AngularModelController.js”></script>

    <form id=”form1″>
       <div ng-app=”angularApp” ng-controller=”angularController”>
            <input id=”rdBtn1″ type=”radio” name=”rdOption” ng-model=”rdBtnShowHide” value=”show” />Show me
            <input id=”rdBtn2″ type=”radio” name=”rdOption” ng-model=”rdBtnShowHide” value=”hide” />Hide me
            <div style=”padding:20px;”></div>
            <div ng-show=”rdBtnShowHide == ‘show'”>Welcome to the world of Angular JS</div>
            <div ng-show=”rdBtnShowHide == ‘hide'”>Data Hide</div>


Please follow and like us:

Leave a Comment