javascript - Dynamic properties has not effect in my Angular Directive -

i'm coding custom directives , necessary have custom properties setted directive. i've done that, dynamic properties not make effect.

i'm testing angular ui-mask. when put ui-mask directly on html template works, when cames mdiattrsdirective don't. , worst thing is: same on chrome inspector.

i've tried use $scope.$apply(), doesn't work too.

dynamic properties directive

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]));         }     }; }); 

my 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';         }     } }); 

my html 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>     

my directive call

<mdi-input mdi-model="mdiinputmodel"          mdi-blur="dorequest"         mdi-label="mdi input directive"         mdi-custom-properties="{'ui-mask': '(999) 999-9999'}"         mdi-required="true">  </mdi-input>