---
title: "How to hide model in Angular JS"  
description: "How to hide model in Angular JS"  
author: "Anupam Mishra"  
published: 2016-02-23  
updated: 2016-02-23  
canonical: https://www.mindstick.com/forum/33994/how-to-hide-model-in-angular-js  
category: "javascript"  
tags: ["javascript", "html", "angular js"]  
reading_time: 2 minutes  

---

# How to hide model in Angular JS

Hi All,I am using [angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) js in my [mvc](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) 4 [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) .Can [anyone give me](https://answers.mindstick.com/qa/41194/can-anyone-give-me-some-high-and-low-points-of-each-of-the-four-first-presidential-administrations) a solution to how to hide [model](https://yourviews.mindstick.com/view/81334/america-is-reopening-after-corona-lockdown-but-on-swedish-model) in Angular js.\
Thank you.

## Replies

### Reply by Manoj Bhatt

Hi Anupam,Here we have already a one model "**Editmodel**". Code is as follows:\

> ```
> <div class="modal fade" id="Editmodal" tabindex="-1" role="dialog" aria-       labelledby="modalLabel" aria-hidden="true">   <div class="modal-dialog">     <div class="modal-content">         <div class="modal-header" style="background-color: #ccc;">            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>               <h3 class="modal-title" id="lineModalLabel2">Edit Records</h3>                        </div>           <div class="modal-body" id="alertcontent2">                <div style="padding-top: 30px" class="panel-body">                    <div class="divList">                        <p class="divHead">Edit Student</p>                       <table>                    <tr>                   <td style="padding-right: 10px;"><b>First Name</b></td>                     <td style="padding-right: 15px;">                        <input type="text" class="form-control" ng-model="FirstName" />                               </td>                              </tr>                       <tr>                   <td style="padding-right: 10px;"><b>Last Name</b></td>                          <td style="padding-right: 15px;">                        <input type="text" class="form-control" ng-model="LastName" />                           </td>                              </tr>                       <tr>                 <td style="padding-right: 10px;"><b>Enrollment Date</b></td>                    <td style="padding-right: 20px;">                     <input type="text" class="form-control" ng-model="EnrollmentDate" />                             </td>                </tr>                    <tr>
> <td colspan="8" style="padding-top: 20px; text-align: right;">          <input type="button" class="btnAdd btn btn-primary" value="Save" ng-click="AddUpdateStudent()" />                                                </td>                                        </tr>                                    </table>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </div>If we want to hide the above model"Edit Model". Now we add one extra line code for hiding the model with creating a Close Button :  <input type="button" class="btnAdd btn btn-primary" data-dismiss="modal" value="Close" ng-           click="Close()" />
> ```

>

**Output:**

![How to hide model in Angular JS](https://www.mindstick.com/mindstickforums/f8516b6c-4c8f-4bbd-b748-eb7a7d0f16e1/images/51c58cf2-2ac7-4036-af51-28b90f549f68.png)\

\

**When we Click Close Button, this model is hide.**

\


---

Original Source: https://www.mindstick.com/forum/33994/how-to-hide-model-in-angular-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.