AngularJS input checkbox model?

Question

I have this HTML:

<div>
    <input type="checkbox" ng-model="EmailToUser" />
    <input type="checkbox" ng-model="EmailToOwner" />
</div>

And this in my controller.js:

$scope.EmailToUser = true;
$scope.EmailToOwner = false;

$scope.Save = function() {
    if($scope.EmailToUser) {
        alert("I'm supposed to email the user.");
    }

    if($scope.EmailToOwner) {
        alert("I'm supposed to email the owner.");
    }
}

This doesn't work, when I click the checkbox the values true/false are constant for some reason. EmailToUser is always true and EmailToOwner is always false regardless of the checkbox state.

But, if I change the code to this:

<div>
    <input type="checkbox" ng-model="EmailToUser.Value" />
    <input type="checkbox" ng-model="EmailToOwner.Value" />
</div>

And controller.js:

$scope.EmailToUser = {};
$scope.EmailToUser.Value = true;
$scope.EmailToOwner = {};
$scope.EmailToOwner.Value = false;

$scope.Save = function() {
    if($scope.EmailToUser.Value == true) {
        alert("I'm supposed to email the user.");
    }

    if($scope.EmailToOwner.Value == true) {
        alert("I'm supposed to email the owner.");
    }
}

It works. Why? I can't seem to figure the differences between #1 and #2. Am I not creating new objects the same way inside the scope and assigning a true/false value in both ways?

Is this inside an ng-repeat, ng-switch etc.. or something? youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m — PSL
@PSL I believe not, it's a modal, so the code is closed inside the window (I think so). If not, there's no repeat or switch, but there might have a layer or two above it... (I'm using $scope though) — Danicco

SoftEngineer1 SoftEngineer1 · Accepted Answer · 2014-07-28T20:30:50

controller.js(code)

$scope.EmailToUser = true;
$scope.EmailToOwner = false;
$scope.save1 = function(EmailToUser,EmailToOwner){

    if($scope.EmailToUser) {
        alert("I'm supposed to email the user.");
    }if($scope.EmailToOwner) {
        alert("I'm supposed to email the owner.");
    }
};

controller.html

<div>
    <input type="checkbox" ng-model="EmailToUser" />
    <input type="checkbox" ng-model="EmailToOwner" />
</div>
<button  type="button" ng-click="save1(EmailToUser,EmailToOwner)">click</button>

This code works for me.There is some scope issue.

AngularJS input checkbox model?

1 Answers