MDL Checkbox weird behaviour with angular

I'm using MDL and angular, i'm fetching some data from an API and then populate a tab containing a list with checkboxes.

The problem is that when i click the checkbox it doesn't check, i have to click twice to get the checkbox checked.

The HTML Markup is:

<div class="mdl-tabs__panel" id="tab4">
    <div class="options-container">
        <div ng-repeat="company in busCompanies" class="option-item">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="companies-checkbox-{{$index}}">
                <i class="material-icons">star</i>
                <span class="star-rating">4.8</span>
                <span class="mdl-checkbox__label">{{company.name}}</span>
                <input type="checkbox" ng-model="myFilter.companies['{{company.name}}']" id="companies-checkbox-{{$index}}" class="mdl-checkbox__input">
            </label>
        </div>
    </div>
</div>

I have other tabs but there the content is not loaded dinamically and they are working properly.

Any idea of how could i solve the issue?

Note: I know that is much better to use Angular Material (Since it was designed to work properly with angular) however i have to use MDL because we have no time to remake the page using Angular Material