checkbox is not clickable within nested ng-repeat

Question

To get an idea of the setup I'm using in my application I set up this simplified example:

<div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="oConfigEntry in oConfiguration.oConfigEntriesColl">
            <ul>{{oConfigEntry.sDescription}}
                <li ng-repeat="oConfigSubEntry in oConfigEntry.oConfigSubEntriesColl">{{oConfigSubEntry.sDescription}}
                    <input type='checkbox' ng-model='oConfigSubEntry.bNoOption' />{{oConfigSubEntry.bNoOption}}
                    <ul>
                        <li ng-repeat='oConfigSubSubEntry in oConfigSubEntry.oConfigSubSubEntriesColl'>{{oConfigSubSubEntry.sDescription}}
                            <input type='number' placeholder='length' ng-model='oConfigSubSubEntry.dLength' />
                            <input type='number' placeholder='width' ng-model='oConfigSubSubEntry.dWidth' />
                            <input type='number' placeholder='height' ng-model='oConfigSubSubEntry.dHeight' />
                            <input type='checkbox' title='opt1' ng-model='oConfigSubSubEntry.bOpt1' />
                            <input type='checkbox' title='opt2' ng-model='oConfigSubSubEntry.bOpt2' />
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
<pre ng-bind="oConfiguration | json"></pre> 
</div>

see http://jsfiddle.net/ppellegr/4QABQ/

Unfortunately the problem I'm facing in the real application cannot be reproduced in the latter mentioned example.

The problem is that in the real application the checkboxes are not clickable. Clicking the checkboxes do not check them. The checkboxes remain unchecked.

The other way around If the corresponding model is initialized the checkboxes are checked but cannot be unchecked by clicking them.

Even plain checkboxes with no model assigned cannot be checked if they are placed within a nested ng-repeat .

eg

<input type="checkbox" />

Has anyone already noticed such a phenomenon?

additional observations:

• The first click on the checkbox changes the value of the model.
• Subsequent clicks do not change the value. The value of the model remains the same.
• While the first click on the checkbox changes the value of the model, the checkbox itself remains checked/unchecked depending on the inital value of the model.

Answer 1

My guess is that another element is positioned in such a way as to cover or overlap the checkbox, and that is preventing you from interacting with it. Assuming you have no inline styles applied to your markup, you can test this easily by disabling CSS in your browser (you may need to install an extension to do this, eg: How to disable CSS in Browser for testing purposes ).

If you find that you can click the checkbox like that, you then need to debug your css to find the offending element. Use firebug or chrome developer tools to explore the markup and css.

Answer 2

In the real application the checkbox showing the described behavior is within a list that is enriched by a little jQuery feature making the list collapsible and expandable...

function prepareList() {
    $('#ConfigContainer').find('li:has(ul)')
        .click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
        .addClass('collapsed')
        .children('ul').hide();
}

$(document).ready(function () {
    prepareList();
});

see http://jsfiddle.net/ppellegr/cP726/

In this example the described behavior can be reproduced...

The culprit line of code is obvious:

return false;

This stops propagation of event and obviously interferes with the checkbox...

Lesson learnt:

• check whether javascript, jQuery or the like are interfering with angularjs...
• consider writing an angular directive...