angularjs - Angular/Ionic : change input focus after completion -

in order users lon application, send them code (6 numbers) sms. when coming application, display popup in order them input said code. have 6 inputs (maxlength=1) better design. here visual have :

there (so-far) html template of popup :

<ion-content class="content-activation-code"> <div class="activation-code-list">     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c1" ng-focus="code.c1===''">     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c2">     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c3" >     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c4" >     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c5" >     <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c6" > </div> 

css template :

/*popup code*/ .content-activation-code{     margin-top:55px; }     .activation-code-list{         text-align:center;     }     .content-activation-code .activation-input-code{         width:20px;         border:1px solid grey;         margin:2px;         border-radius:10px;         text-align:center;         display:inline;     } 

and controller in charge of displaying popup :

$scope.code = {c1:"",c2:"",c3:"",c4:"",c5:"",c6:""};      $ionicpopup.show({         templateurl: "templates/activation_code.html",         title: 'pour activer votre compte',         subtitle: 'entrez le code envoyé au xxxx',         scope: $scope,         buttons: [             { text: 'annuler' },             {               text: 'activer',               type: 'button-positive',               ontap: function(event) {                 console.log($scope.code);               }             }           ]     }); 

for user not hate me , log application, implement kind of directive doing follow : - focus on first input when popup opens - focus on next input everytime previous completed - focus on previous input everytime next 1 deleted , backspace pressed

tip : tried puting background-image input simulate behavior, didn't show right on phone.

i'm using angular 1.5.3

you need add directive on each input trigger focus on next one

 elem.on(keypress, function(e) {    e.target.nextelementsibling.focus().select();  }) 

example jsfiddle