Checkbox to button ngmodel - which way to change my value

Question

I'd like to edit my checkbox so I get a or an input with type=button instead.

I have for now, properly working :

<label>Afficher</label>
<input type="checkbox" ng-model="isElementVisible">

Simply, with my script-angular.js :

$scope.isElementVisible = false ; //it's working, true when I click on my checkbox.

I haven't been using AngularJS for a looong time cause that's an old project and I don't know how to say to the button that my ng-model needs to change, should I do a function or is there an easier way ?

Thanks in advance to you all :3

Answer 1

You can simply handle it in the html using

ng-click="isElementVisible = !isElementVisible"

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.isElementVisible = false;
  }]);

.hlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="isElementVisible = !isElementVisible">Click to toggle isElementVisible</button>
  <div ng-class="{'hlight':isElementVisible}">isElementVisible is {{isElementVisible}}</div>
</div>