title: Hide and show on button click in angularjs
body: <p>I want to hide the value by default and show the value when I click on button for 1st time. When you click on the same button for a 2nd time, it should hide the value instead of displaying. Vice versa it should happen.</p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head&gt;
    &lt;title&gt;AngularJS&lt;/title&gt;
    &lt;script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"&gt; 
    &lt;/script&gt;
    &lt;script th:src="@{/main.js}"&gt;&lt;/script&gt;   
  &lt;head&gt;
  &lt;body ng-app="EmployeeManagement" ng-controller="EmployeeController"&gt;
  &lt;input type="button" value="Show Angular" ng-click="ShowHide()"/&gt;
   &lt;div ng-show = "IsVisible"&gt; yes &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is my JS File:</p>
  
  <pre><code>var app = angular.module("EmployeeManagement", []);
  app.controller("EmployeeController", function($scope, $http) {
   $scope.ShowHide = function(){
       $scope.IsVisible =  true;
   }
  </code></pre>
  
  <p>can anyone tell me how to achieve this scenario?</p>