title: How to show/hide div in angularjs?
body: <p>I am trying to hide the div in tabview and after click on save button i want to show that div. How can i get this?
  In following code when i will click on Save data from Add Records tab it should toggle to display records and display added records in table. which is hidden by default for now.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
       &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;  
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="mainApp"&gt;  
  
      &lt;div ng-controller="MyController"&gt;
  
      &lt;div class="tabgroup" ng-init="tab=1"&gt;
      &lt;div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1"&gt;Home&lt;/div&gt;
      &lt;div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2"&gt;Display Records&lt;/div&gt;
      &lt;div class="tab" ng-class="{selected: tab==3}" ng-click="tab = 3"&gt;Add Records&lt;/div&gt;
      &lt;div class="tab" ng-class="{selected: tab==4}" ng-click="tab = 4"&gt;Edit/Remove Records&lt;/div&gt;
  
  &lt;/div&gt;
    &lt;div class="otherContainer"&gt;
  &lt;div class="tabcontents"&gt;   
  
  
  
      &lt;div ng-show="tab == 1"&gt;
  
         This application shows employee details registered for this site. You can add your records by clicking on add button.
         Also you can update and delete records.
  
      &lt;/div&gt;
  
  
  
      &lt;div ng-show="tab == 2"&gt;
        &lt;div&gt;
      &lt;p&gt; There is no data to display&lt;/p&gt;
      &lt;a href ng-click="tab = 3"&gt; Add Records&lt;/a&gt;&lt;/div&gt;
      &lt;div ng-show="showDiv"&gt;
       &lt;table border= 1&gt;  
             &lt;thead&gt;  
                 &lt;th&gt;Id&lt;/th&gt;  
                 &lt;th&gt;Name&lt;/th&gt;  
                 &lt;th&gt;Birthdate&lt;/th&gt; 
                      &lt;th&gt;Address&lt;/th&gt; 
                       &lt;th&gt;Contact&lt;/th&gt; 
                       &lt;th&gt;Email&lt;/th&gt;
  
             &lt;/thead&gt;  
             &lt;tr data-ng-repeat="Emp in EmpList"&gt;  
                 &lt;td ng-bind = "Emp.Id"&gt;&lt;/td&gt;  
                 &lt;td ng-bind = "Emp.Name"&gt;&lt;/td&gt;  
                 &lt;td ng-bind = "Emp.Birthdate"&gt;&lt;/td&gt;
                     &lt;td ng-bind ="Emp.Address"&gt;&lt;/td&gt;
                     &lt;td ng-bind = "Emp.Contact"&gt;&lt;/td&gt;
                     &lt;td ng-bind = "Emp.Email" &gt;&lt;/td&gt;
  
          &lt;th&gt;&lt;input type="button" ng-click= "removeItem()" value="Remove" /&gt;&lt;/th&gt;
          &lt;th&gt;&lt;input type="button" ng-click= "editItem(i)" value="Edit" /&gt;&lt;/th&gt;
             &lt;/tr&gt;  
         &lt;/table&gt; 
         &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div ng-show="tab == 3"&gt;
         &lt;form name="userForm"&gt;
          &lt;table&gt;  
  
              &lt;tr&gt;  
                  &lt;td&gt;Name:&lt;/td&gt;  
                  &lt;td&gt;  
                      &lt;input name= "myInput" type="text" data-ng-model="EmpModel.Name" required/&gt;
                      &lt;span ng-show="userForm.myInput.$touched" &amp;&amp; "userForm.myInput.$invalid"&gt;
                        &lt;span ng-show="userForm.myInput.$error"&gt;Name is required&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/td&gt; 
              &lt;/tr&gt;  
              &lt;tr&gt;  
                  &lt;td&gt;Birthdate:&lt;/td&gt;  
                  &lt;td&gt;  
                      &lt;input name= "myInput" type="date" data-ng-model="EmpModel.Dob" required/&gt;
                       &lt;span ng-show="userForm.myInput.$touched" &amp;&amp; "userForm.myInput.$invalid"&gt;
                         Birthdate is required
                         &lt;/span&gt;&lt;/td&gt; 
  
              &lt;/tr&gt;  
                  &lt;tr&gt;  
                  &lt;td&gt;Address:&lt;/td&gt;  
                  &lt;td&gt; 
                      &lt;input  name= "myInput" type="text" data-ng-model="EmpModel.Address" /&gt;
                       &lt;span ng-show="userForm.myInput.$touched" &amp;&amp; "userForm.myInput.$invalid"&gt;Address is required&lt;/p&gt;&lt;/td&gt;   
              &lt;/tr&gt; 
                  &lt;tr&gt;  
                  &lt;td&gt;Contact:&lt;/td&gt;  
                  &lt;td&gt;  
                      &lt;input  name= "myInput" type="number" data-ng-model="EmpModel.Contact" /&gt;
                       &lt;p ng-show="userForm.myInput.$error.required"&gt;Contact is required&lt;/p&gt;&lt;/td&gt;  
              &lt;/tr&gt; 
  
              &lt;tr&gt;  
                  &lt;td&gt;EmailId:&lt;/td&gt;  
                  &lt;td&gt;  
                      &lt;input name= "myInput" type="email" data-ng-model="EmpModel.Email" /&gt;
                       &lt;p ng-show="userForm.myInput.$error.required"&gt;Emailid is required&lt;/p&gt;&lt;/td&gt;  
              &lt;/tr&gt; 
              &lt;tr&gt;  
                  &lt;td&gt;&lt;input type="button" ng-click="AddData()" value="Save Data"/&gt;&lt;/td&gt; 
                       &lt;td&gt;&lt;input type="button" ng-click= " AddData()" value="Update" style="display:none" /&gt;&lt;/td&gt;
                &lt;/tr&gt;
  
  
  
  
  
          &lt;/table&gt; 
          &lt;/form&gt;
          &lt;/div&gt;
  
  
          &lt;div ng-show="tab == 4"&gt;
             &lt;table border= 1&gt;  
             &lt;thead&gt;  
                 &lt;th&gt;Id&lt;/th&gt;  
                 &lt;th&gt;Name&lt;/th&gt;  
                 &lt;th&gt;Birthdate&lt;/th&gt; 
                      &lt;th&gt;Address&lt;/th&gt; 
                       &lt;th&gt;Contact&lt;/th&gt; 
                       &lt;th&gt;Email&lt;/th&gt;
  
             &lt;/thead&gt;  
             &lt;tr data-ng-repeat="Emp in EmpList"&gt;  
                 &lt;td ng-bind = "Emp.Id"&gt;&lt;/td&gt;  
                 &lt;td ng-bind = "Emp.Name"&gt;&lt;/td&gt;  
                 &lt;td ng-bind = "Emp.Birthdate"&gt;&lt;/td&gt;
                     &lt;td ng-bind ="Emp.Address"&gt;&lt;/td&gt;
                     &lt;td ng-bind = "Emp.Contact"&gt;&lt;/td&gt;
                     &lt;td ng-bind = "Emp.Email" &gt;&lt;/td&gt;
  
          &lt;th&gt;&lt;input type="button" ng-click= "removeItem()" value="Remove" /&gt;&lt;/th&gt;
          &lt;th&gt;&lt;input type="button" ng-click= "editItem(i)" value="Edit" /&gt;&lt;/th&gt;
             &lt;/tr&gt;  
         &lt;/table&gt;  
      &lt;/div&gt;
  
  
  
  
      &lt;/div&gt;
  
   &lt;/div&gt;  
  
    &lt;/div&gt;  
  &lt;/body&gt;  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>js -</p>
  
  <pre><code>var app = angular.module("mainApp", []);  
         app.controller('MyController', function ($scope) {  
  
             $scope.EmpModel = {  
  
                 Birthdate: 0,  
                 Name: '', 
             Address: '',
             Contact: '', 
             Email: '',
             };  
             console.log($scope.EmpModel);
             $scope.EmpList = [];  
             $scope.AddData = function () {  
                 var _emp = {  
                     Id: $scope.EmpList.length + 1,  
                     Name: $scope.EmpModel.Name,  
             Birthdate: $scope.EmpModel.Dob,
             Address: $scope.EmpModel.Address,
             Contact: $scope.EmpModel.Contact, 
             Email: $scope.EmpModel.Email
                 };  
                 $scope.EmpList.push(_emp); 
                 $scope.tab = 2;
                 ClearModel();  
             }  
  
             function ClearModel() {  
                  $scope.EmpModel.Id = 0;  
                  $scope.EmpModel.Name = '';  
                  $scope.EmpModel.Dob = ''; 
                      $scope.EmpModel.Address = '';
                      $scope.EmpModel.Contact = ''; 
                      $scope.EmpModel.Email = '';
             } 
  
  
      $scope.removeItem = function (index) {
                console.error("rrrrrrrr");
  
              console.log(index);
              $scope.EmpList.splice(index, 1)
          } 
  
          $scope.editItem = function(id) {
                  console.error("errrroooooorrr")
                  for (i in $scope.EmpList) {
                      console.log($scope.EmpList);
                      if ($scope.EmpList[i].id == id) {
                          $scope.EmpModel = angular.copy($scope.EmpList[i]);
                          $scope.EmpList.splice(id,1);
                          //$scope.EmpList[0].id =id;
                          EmpList.splice(id, 1);
                      }
                  }
  
          }
  
  $scope.hideMe = function(){
      console.log('hide the button');
      $scope.hide();
    }
  
         });
  </code></pre>