Autofocus on the disabled field that would be enabled after certain conditions

Question

I have two input fields as shown below in the pic.

I am trying to focus on the next field which is disabled now but after entering maxlength of chars in the first field it would get enabled. And I want the cursor there on the next field automatically after getting enabled.

The code I am using is given below:

.directive('moveNext', function(){
return{
    restrict: 'A',
    link: function($scope, element){
        element.on("input", function(e){
            if((element.val().length==element.attr("maxlength"))){
                console.log('asdfasdf');
                var tabindex = 1;
                var $nextelement = $('input[tabindex='+(tabindex+1)+']');
                console.log($nextelement);
                if($nextelement){
                    console.log('asdf');
                    $nextelement.focus();
                }
            }
        });
    }
}
});

Answer 1

Try not using ng-disabled instead use disabled property of javascript.

document.getElementById("myText").disabled = true;

And then under your directive make above false first and move the focus on next element like as below:

document.getElementById("myText").disabled = false;
$nextelement.focus();

In your case focus is getting called first after digest cycle before the field gets enabled.