ngModel checkbox not shown as selected

Question

I'm having some trouble getting a checkbox to display the correct state (checked/unchecked) of my model. I have the following in my controller:

app.controller('PhotosCtrl', ['$scope', function($scope) {
    $scope.form = {};
    $scope.editPhotos = {
        token: $scope.token,
        idArray: $scope.idArray
    };
}]);

My form looks like this:

<form accept-charset="UTF-8" name="editPhotosForm" ng-submit="submit(editPhotos);" multipart="true" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="editPhotos.token" ng-init="editPhotos.token='<%= form_authenticity_token %>'">
    <div class="results-label"><b>{{total_count}}</b> <span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span> Found</div>
    <div>
        <div class="col">
            <a ng-repeat="r in results" class="card result-link">
                <div class="content result">
                    <div class="caption">
                        <input type="checkbox" ng-model="idArray[r.id]">
                    </div>

                    <div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
                    </div>
                </div>
            </a>
        </div>
    </div>
</form>

On my repeater element, I call ng-init="idArray[r.id] = 'false'" to initialize a key r.id = 'false' for each item in r. I don't know if I need to do this or not. I've tried the code without it and it makes no difference. I've also tried using ng-value-true and ng-value-false but those don't seem to be working for me.

Most of the other posts I've seen on this issue deal with simple variables (e.g. $scope.someVar = true rather than more complex structures like a hash.

Here is the structure of idArray:

$scope.idArray = {1290: "false", 1291: "true", 1292: "true", 1293: "false", 1294: "false", 1414: "false"};

This is generated by the ng-init in my repeater, since the ids of the photos can't be known beforehand.

Here is what results looks like:

{
    id: 1290,
    company_id: null,
    image_url: "http://s3.amazonaws.com/mybucket/photos/images/000/001/290/original/214.JPG?1432217895"
}

Answer 1

Doing the following

    ng-init="idArray[r.id] = 'false'"

You're assigning the string value 'false' into your object.

Can't you deal with that inside your controller?

$scope.idArray = {};
for (var i = 0; i < $scope.results.length; ++i){
    $scope.idArray[$scope.results[i].id] = (i%2 == 0);
}

And removing the ng-init="" (which is, according to Angular doc, a bad practice https://docs.angularjs.org/api/ng/directive/ngInit ).

Another thing was the anchor element that was wrapping the checkbox element. This lead to the click event that was not triggered on the checkbox, but only on the anchor.

    <div class="col">
        <div ng-repeat="r in results" class="card result-link">
            <div class="content result">
                <div class="caption">
                    <input type="checkbox" ng-model="idArray[r.id]">
                </div>

                <div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
                </div>
            </div>
        </div>
    </div>

fiddle :

http://jsfiddle.net/patxy/wak7pwwp/