ng-checked In angular 1.6 not forcing a checkbox to remain unchecked

Question

I have a input element wired up to a function IsChecked . IsChecked always returns false, I expect that checkbox to never be checked regardless of how many clicks it recieves. What is happening instead is the checkbox is changing to checked and un-checked irregardless of my function.

How can I force a checkbox to remain unchecked based off of a function call?

<div ng-app ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName"></input>
    <input type="submit" ng-click="login()" value="Login"></input>
    <input type="checkbox" ng-checked="IsChecked()"></input>
    <div ng-repeat="login in logins">{{ login }}</div>
    <div>{{IsChecked()}}</div>
</div>

function LoginController($scope) {
    $scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.IsChecked =function(){
        return false;
    }
    $scope.login = function () {
        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
}

JSFiddle

Answer 1

The ng-checked directive sets the checked attribute of a checkbox or a radiobutton .

The checkbox, or radiobutton, will be checked if the expression inside the ng-checked attribute returns true.

But that is only for setting it unchecked in beginning, next time when you click on it, you set the checked attribute to true.

You should bind a ng-model to the checkbox and set it to false always. Or just keep the checkbox disabled by adding attribute ngDisabled to it so that it's not checked. EX:

<input type="checkbox" ng-disabled="isChecked" />

Answer 2

You should check the change event using ng-change and pass a model to read the checkbox's value using ng-model .

<input type="checkbox" ng-change="CheckedChanged()" ng-model="isChecked" />

And to make it remain unchecked -

$scope.CheckedChanged =function(){
    $scope.isChecked = false; // To make it remain unchecked
}

Check this Fiddle

In this way you can omit ng-checked in that case. ng-checked and ng-model are not meant to be used together. A use case for using ng-checked can be when, let's say you're creating a checkbox dynamically and you need to pass an expression to set the state of the checkbox.

Answer 3

You can add a ng-model on that checkbox and associate a on-click function so that whenever you click on the checkbox the function will revert it back to unchecked.

HTML

<div ng-app ng-controller="LoginController">
  <div>Hello {{ user.firstName }}</div>
  <input ng-model="user.firstName"></input>
  <input type="submit" ng-click="login()" value="Login"></input>
  <input type="checkbox" ng-model="checkboxCheck"
         ng-click="CheckStatus()"></input>
  <div ng-repeat="login in logins">{{ login }}</div>
  <div>{{checkboxCheck}}</div>
</div>

JS

function LoginController($scope) {
  $scope.user = {
    firstName: "Foo",
    lastName: "Bar"
  };
  $scope.logins = [];
  $scope.checkboxCheck = false;
  $scope.IsChecked = function() {
    $scope.checkboxCheck = false;
    return $scope.checkboxCheck;
  }
  $scope.login = function() {
    $scope.logins.push($scope.user.firstName + " was logged in.");
  };
  $scope.CheckStatus = function() {
    $scope.checkboxCheck = false;
  }
}

Here is the working example in JSFIDDLE