Event prevent default

Event prevent default

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app>
    <div ng-controller="Ctrl">
        <input type="checkbox" ng-checked="item.selected == 'yes'" ng-click="change($event)">{{item.selected}}
        <br/>
        <input type="checkbox" ng-checked="item.selected == 'yes'" ng-click="change($event)">{{item.selected}}
        <br/>
        <input type="checkbox" ng-checked="item.selected == 'yes'" ng-click="change($event)">{{item.selected}}
        <br/>
    </div>
</body>

JavaScript

var Ctrl = function ($scope) {
    $scope.item = {
        selected: 'no'
    };
    $scope.change = function ($event) {
        if ($scope.item.selected == 'no') {
            $scope.item.selected = 'halfway';
            $event.preventDefault();
        } else if ($scope.item.selected == 'halfway') {
            $scope.item.selected = 'yes';
        } else if ($scope.item.selected == 'yes') {
            $scope.item.selected = 'no';
        }
        
    }
}