If the user clicks a button, I need to run the following actions:Show and hide div Add and remove attributesAdd and remove CSS classWe archive the same but I'm not sure this is the correct approach or not. Can anyone help improve this?HTML<div ng-app>    <div ng-controller=MyCtrl>        <div><button id=mybutton ng-click=showAlert()>Click me</button></div>        <div>Value: {{myvalue}}</div>        <div>        <h4 ng-show=myvalue class=ng-cloak>Change Mode</h4>        <a href= contenteditable={{atribut}}>link text</a>        <p class=red ng-class={'blue':isActive}>Text Contents </p>        </div>    </div></div>JS function MyCtrl($scope) {    $scope.myvalue = false;//Show and hide DIV    $scope.atribut=false; // Set Attribute value    $scope.isActive=false; // Add and Remove CSS Class    $scope.showAlert = function(){      $scope.myvalue =!$scope.myvalue;       $scope.atribut=!$scope.atribut;      $scope.isActive=!$scope.isActive;    };CSS.red{color:red;}.blue{color:blue;}Demo
Running actions on button click
javascript;html;angular.js