Not able to get the passed argument in ng-checked function

Question

I called a function in ng-checked to check of the current checkbox's value is 'test' or not if it is checked then the checkbox should be checked or else the checkbox should be unchecked

To achieve this I passed this.value as an argument for show function which is called in ng-checked. But this this.value is undefined when logged in console . Even when I pass the event object inside the function as a parameter it is returning undefined.

Please checked the below code :

var app = angular.module('app', []);

app.controller('mainController', function($scope, $http) {
    $scope.show = function(val) {
        console.log(val);
        if (val == 'test') {
            return true;
        } else {
            return false;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app">
    <div ng-controller="mainController">
	    <input type="checkbox" value="test" ng-checked="show(this.value)"/>
    </div>
</div>

Thanks in advance :)

Answer 1

You might want to use the ng-model instead of ng-checked

var app = angular.module('app', []);

app.controller('mainController', function($scope, $http) {
  $scope.test = false
  $scope.show = function(val) {
      $scope.test = val
  }

  /// after fetching data from your server, 
  /// you can set checked by calling:
  $scope.show(true)
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <input type="checkbox" ng-model="test"   />
     
  </div>
</div>