# AngularJS HTML DOM
* * *
AngularJS provides directives for binding application data to the attributes of HTML DOM elements.
* * *
## The ng-disabled Directive
The **ng-disabled** directive binds application data directly to the HTML disabled attribute.
## AngularJS Example
Button
{{ mySwitch }}
[Try it Yourself »](#)
Example Explanation:
The **ng-disabled** directive binds the application data "mySwitch" to the HTML disabled attribute.
The **ng-model** directive binds "mySwitch" to the content (value) of the HTML input checkbox element.
If **mySwitch** is **true**, the button will be disabled:
If **mySwitch** is **false**, the button will be enabled:
* * *
## The ng-show Directive
The **ng-show** directive hides or shows an HTML element.
## AngularJS Example
I am visible.
I am invisible.
[Try it Yourself »](#)
The ng-show directive shows (or hides) an HTML element based on the **value** of the expression.
You can use an expression to calculate a boolean value (true or false):
## AngularJS Example
12">I am visible.
[Try it Yourself »](#)
|  | In the next chapter, we will introduce more examples of hiding HTML elements by clicking a button. |
| --- |
* * *
## The ng-hide Directive
The **ng-hide** directive is used to hide or show an HTML element.
## AngularJS Example
YouTip