Directive does not work with dynamic properties

Question

Whoa, whoa, guys, whoa. I’m developing some custom directives around here, and they need to have properties added flexibly (like an ng-class). I was able to develop the mechanism to do this, however, I came across a bizarre problem: it adds the property but it has no effect

I’m testing with the libs angular-input-masks and ui-Mask. My directive correctly adds the attributes, however, they do not take effect.

Particularly, I think this is some kind of scripting time problem or something. What reinforces this thinking is that when I add the attributes directly in the html template, it works.

I’ve tried to use $scope.$apply(), but it went bad :(.

Testing: https://plnkr.co/edit/Ae7oABrzAACjr9NDYLhK?p=preview

Thanks in advance.

Directive of dynamic properties

app.directive('mdiAttrs', function() {
    return {
        restrict: 'A',
        replace: true,
        link: (scope, elem) => {
            let attrs = scope.mdiCustomProperties || {};

            Object.keys(attrs).forEach(attrKey => elem.attr(attrKey, attrs[attrKey]));
        }
    };
});

Input Directive

app.directive('mdiInput', () => {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'templates/mdi-input.html',
        scope: (() => {
            const inputScope = angular.copy(directiveScopeModel);

            inputScope.mdiType = '@?';
            inputScope.mdiPlaceholder = '@?';
            inputScope.mdiTitle = '@?';

            return inputScope;
        })(),
        controller: $scope => {
            $scope.isLoading = false;
            $scope.mdiType = $scope.mdiType || 'text';
        }
    }
});

Template

<label class="mdi-directive">
    <span class="mdi-label">{{mdiLabel}}</span>
    <input type="{{mdiType}}" 
        class="mdi-component" 
        ng-model="mdiModel"
        ng-click="mdiClick(this)"
        ng-blur="mdiBlur(this)"
        ng-class="{'loading': isLoading}"
        ng-disabled="isLoading"
        placeholder="{{mdiPlaceholder}}"
        ng-required="mdiRequired"
        title="{{mdiTitle}}"
        mdi-attrs="mdiCustomProperties"> 
</label>    

Call for the directive

<mdi-input mdi-model="mdiInputModel" 
        mdi-blur="doRequest"
        mdi-label="MDI Input Directive"
        mdi-custom-properties="{'ui-mask': '[phone]'}"
        mdi-required="true">
 </mdi-input>