Using ng-checked on checkbox in nested ng-repeat is always true

Question

I am using nested ng-repeats to display content on a page. The nested ng-repeat displays a checkbox and the checked status of that checkbox should be set to the boolean value of the data in the ng-repeat. I am using ng-checked and passing in a truthy value, however, the checkboxes are always checked regardless of the value.

I have simplified my code into a demo that displays the behaviour jsFiddle .

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <div ng-repeat="item in myArray">
            <h3>{{ $index }}.&nbsp;{{ item.title }}</h3>
            <div ng-repeat="child in item.subArray">
                <h4>({{ child.id }}). {{child.title}} </h4>
                <input type="checkbox" ng-checked="child.result" />
                <h6>Answer is: {{ child.result }}</h6>
            </div>
        </div>
    </div>
</div>

JavaScript

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

function myController($scope) {
   $scope.myArray = [
            { id: "1", title: "my array 1", subArray: [
                { id: "1", title: "my sub array 1", result: "false" },
                { id: "1", title: "my sub array 2", result: "true" },
                { id: "1", title: "my sub array 3", result: "false" },
                { id: "1", title: "my sub array 4", result: "true" },
                { id: "1", title: "my sub array 5", result: "false" }]
            },
            { id: "1", title: "my array 2", subArray: [
                  { id: "1", title: "my sub array 1", result: "true" },
                  { id: "1", title: "my sub array 2", result: "false" },
                  { id: "1", title: "my sub array 3", result: "true" },
                  { id: "1", title: "my sub array 4", result: "false" },
                  { id: "1", title: "my sub array 5", result: "true" }]
            },
            {
                id: "1", title: "my array 3", subArray: [
                    { id: "1", title: "my sub array 1", result: "false" },
                    { id: "1", title: "my sub array 2", result: "false" },
                    { id: "1", title: "my sub array 3", result: "true" },
                    { id: "1", title: "my sub array 4", result: "false" },
                    { id: "1", title: "my sub array 5", result: "false" }]
            },
            {
                id: "1", title: "my array 4", subArray: [
                    { id: "1", title: "my sub array 1", result: "true" },
                    { id: "1", title: "my sub array 2", result: "false" },
                    { id: "1", title: "my sub array 3", result: "false" },
                    { id: "1", title: "my sub array 4", result: "false" },
                    { id: "1", title: "my sub array 5", result: "true" }]
            },
            {
                id: "1", title: "my array 5", subArray: [
                    { id: "1", title: "my sub array 1", result: "true" },
                    { id: "1", title: "my sub array 2", result: "true" },
                    { id: "1", title: "my sub array 3", result: "false" },
                    { id: "1", title: "my sub array 4", result: "true" },
                    { id: "1", title: "my sub array 5", result: "true" }]
            }
        ];
}

Can someone explain why this behaviour occurs and help me understand how to rectify it?

Answer 1

Because child.result is string and not boolean the condition is always true .

Use following:

ng-checked="child.result == 'true'"