Angular directive default to checked

I have a directive (element) that I created for a "switch", that uses input[checkbox].

As long as the initial state of the checkbox is to be NOT checked, everything works fine. But if I want to set the initial state to checked (based on my controller value), then it's always the opposite. Why is the value not checked when the controller variable says it should be?

Html

<a-switch toggle-state="vm.doSomething"></a-switch>

Directive Html

<div class="switch-container">
    <input type="checkbox" id="switch" />
    <label for="switch" class="pm-switch"></label>
</div>

Javascript controller

vm.doSomething = {
    state: true
};

Directive

angular.module('material')
    .directive('aSwitch', [
        '$timeout', function($timeout) {
            return {
                templateUrl: 'elements/material/switch/switch.html',
                transclude: false,
                restrict: 'E',
                scope: {
                    toggleState: '=',
                },
                link: function (scope, element) {
                    element.on('click touchstart', function (event) {
                        if (event.srcElement && event.srcElement.id && event.srcElement.id === "switch") {
                            event.stopPropagation();

                            $timeout(function() {
                                scope.toggleState.state = !scope.toggleState.state;
                            });
                        }
                    });
                }
            };
        }
    ]);

I realize that in order to set the checked state of a generic

<input type="checkbox" />

I just need to add the attribute "checked", like

<input type="checkbox" checked />

but how do I do that if it's inside my directive's html?