Ng-Open-2

The main thing about ng-open is write only, so here in below example we will see how we can make ng-open work two way. To achieve this we have to add ng-click on details tag which will update the "open" variable every time user click on details. In this example if you change the selection of checkbox then the value of details will be changed and if user change the selection of details the selection of checkbox will be automatically changed. In the last example of ng-open, it was working as read only means once you change the details tag, it will not update the checkbox selection.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LearnKode - Ng-open example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
Check me check multiple: <input type="checkbox" ng-model="open"><br/>
<details id="details" ng-open="open" ng-click="open = !open" >
   <summary>Show/Hide me</summary>
   Details
</details>
  </body>
</html>

Output