The AngularJS ng-open
directive is used to set the open attribute on the DOM element, if the expression inside ng-open is true.
Syntax
<label>Show All Instructions: <input type="checkbox" ng-model="open"></label><br/> <details id="details" ng-open="open">
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>ngOpen Test Sample</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> </head> <body style="background-color:#DDE4E9;" ng-app=""> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS ngOpen Example</legend> <label>Show All Instructions: <input type="checkbox" ng-model="open"></label><br/> <details id="details" ng-open="open"> <summary>Instructions:</summary> Instructions1<br> Instructions2<br> Instructions3<br> </details> <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-show='open'>Showing Instructions</p> </fieldset> </body> </html>See Live Example