AngularJS. Binding an event to a checkbox

Question

Angular

Hello.
How to make a value added to the variable when a checkbox is selected, and when the checkbox is removed, it is taken back.
Example sketched JsFiddle

Answer 1

Add ng-model="checked" to the checkbox and the controller will look like

$scope.checked = false;
    $scope.data = {
        summa: 1
    };


    $scope.addOne = function () {
        if ($scope.checked) {
         $scope.data.summa++;
        } else {
         $scope.data.summa--;
        }
         
    };

Answer 2

jsfiddle.net/Kf7YP/4

Answer 3

So, the solutions that come to mind are:
1) CSS clip-path: polygon(% numbers or percentages%) - in theory the most ideal solution, but browser support is unlikely to please you.
2) SVG. That is, take a transparent div, put an SVG polygon / path inside with position: absolute and apply an svg filter to it for box-shadow. Responsiveness can be easily achieved with the viewBox and preserveAspectRatio attributes. Well, accordingly, on top of the svg is the content that lies inside the diva.
3) Picture. Terrible option, forget it :)
4) Some hell of a hack with :before, :after. Against the background of the SVG, he is not a fighter at all.
Raw demo - codepen.io/suez/pen/2d7d1453a9d842b85ae307e4244cc237