DOM does not show element.input.checked when checkbox checked with ng-checked

I use ng-checked to check a checkbox by default when a modal loads and meets a certain condition. However, when I do if ( item.checked) on that item, it will return false.

I am using a directive like this.

app.directive( 'toggleButtons', [ function () {
    return {
        link: function ( scope, element ) {
            var toggleButtons = element.find( '.input-add-checkbox' )

            function checkState() {
                Array.prototype.forEach.call( toggleButtons, function( each ) {
                    if ( each.checked )
                        each.parentNode.style.backgroundColor = "#00E0AA"
                    else if ( !each.checked )
                        each.parentNode.style.backgroundColor = "transparent"
                })
            }

            Array.prototype.forEach.call( toggleButtons, function (each) {
                each.addEventListener( 'click', function () {
                    checkState()
                })
            })

            checkState()
        }
    }
}]) 

And my HTML is like this

<label for="listen" type="button" class="type-toggle btn btn-green">
    <input type="radio" id="listen" name="type" value="listen" ng-checked="{{ currentState == 'app.listen' }}" ng-model="contentParams.type" class="input-add-checkbox" />
    <span class="glyphicon glyphicon-headphones"></span>
</label>