Updating md-maxlength value

Question

When I update the "item.MaxLength" value it does not affect the output and still shows the original value as md-maxlength. What is wrong with my code? thanks.

Input-1: I expect it to change md-maxlength value accoding to "input-2"

<input type="text" ng-model="item.Desc" md-maxlength="{{item.MaxLength}}">

Input-2: That I want to control the input-1 md-maxlength with "item.MaxLength"

<input type="number" ng-model="item.MaxLength">

Answer 1

Apparently there's hardly a way to update md-maxlength value dynamically. But there's workaround for your issue. You can just delete & re-render the input element after changing the value of length setting field. add ng-if on md-input-container & change its value accordingly change in length field by using $watch or using ng-change function on length field.

<md-input-container ng-if="showN">
    <label>Name</label>
    <input  type="text" md-maxlength='{{view.len}}' ng-model="view.name" />
</md-input-container>
<md-input-container>
    <label>Len</label>
    <input type="number"  ng-model="view.len" />
</md-input-container>

And in controller have:

$scope.$watch('view.len', function(n,o){
    $scope.showN = false;
    $timeout(function(){
        $scope.showN = true;
    });
});

Working plunker: https://plnkr.co/edit/fLh0VfuTUjjmGo8PRioy?p=preview