AngularJS - HTML DOM Elements Bind

Following directives can be used to bind application data to attributes of HTML DOM Elements.

Sr.No.	Name	Description
1	ng-disabled	disables a given control.
2	ng-show	shows a given control.
3	ng-hide	hides a given control.
4	ng-click	represents a AngularJS click event.

<div ng-app="">
    <table border="0" class="table">
        <tr>
            <td>
                <input type="checkbox" ng-model="enableDisableButton" />Disable Button</td>
            <td>
                <button class="btn btn-primary" ng-disabled="enableDisableButton">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="showHide1" />Show Button</td>
            <td>
                <button class="btn btn-success" ng-show="showHide1">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="showHide2" />Hide Button</td>
            <td>
                <button class="btn btn-warning" ng-hide="showHide2">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <p>Total click: <strong>{{ clickCounter }}</strong></p>
            </td>
            <td>
                <button class="btn btn-danger" ng-click="clickCounter = clickCounter + 1">Click Me!</button>
            </td>
        </tr>
    </table>
</div>

DEMO