change attribute value inside directive

Question

i am trying to make an input that acts like a credit card, my html looks like this

<input  id="card-number" class="card-number" name="card-number" card-number ng-model="card.number" ui-mask="**** **** **** ****" />

and my directive looks like this

.directive('cardNumber', function($cardUtils) {
    return {
        restrict: 'A',
        require: ['^card', 'ngModel'],
        scope: {
            model: '=ngModel'
        },
        link: function(scope, elem, attrs, ctrls) {

            attrs.uiMask = "****";

            var cardCtrl = ctrls[0],
                ngModelCtrl = ctrls[1];

            var watchModel = function() {
                return ngModelCtrl.$viewValue;
            }

            scope.$watch(watchModel, function() {
                var cardType = $cardUtils.getCardByNumber(ngModelCtrl.$viewValue);
                if(cardType.classname == 'american-express')
                    attrs.uiMask = "****     ******     *****";
                else
                    attrs.uiMask = "****     ****     ****     ****";
                    scope.$apply();
                cardCtrl.updateCardClass(ngModelCtrl.$viewValue);
            });

        }
    };
});

now the problem is inside the directive, the line

attrs.uiMask = "****";

actually changes the ui-mask attribute from the input, but when i use same thing inside that $watch function, the attrbute doesnt change even is it gos into the if or else. It seems to only work on the begining of the link function and if i call it inside a function, it doesnt work anymore.

I hope i can get a help on this, thank you in advance, Daniel!

Answer 1

In compile/link functions you can use attrs.$set:

...
link: function(scope, element, attrs){
    attrs.$set('uiMask', '** ** *');
}