Binding a nested object with ng-model to a materialize form-component Angular *video included*

Question

Using materializecss 0.96 and Angular 1.3.15, My form component is now binding to the data in the controller.

You can see from the markup extract below that I'm using ng-model to bind to check.admin.override

<label class="section-title">Allow Client Override</label>
<div class="switch right">
    <label>
        Off
        <input type="checkbox" ng-model="check.admin.override" >
        <span class="lever"></span>
        On
    </label>
</div>

The data structure looks like this

Client: Object {
    admin: Object,
         number_payments_same: "2"
         override: true
         timeframe: "86400"
    client: Object
    ...
}

Not only does the form component not bind (and show the 'on' position) but I am unable to click the component. It won't move!

When I bind the component to a property that is one descendant from the root, I do not experience any problem. For example ng-model="check.override"

To illustrate the issue further, here is a video recording / screencast

Thanks

Answer 1

This was caused by a conflict in my code where I'd placed an ng-click on the containing block element meaning it interferes with the switch