Triggering hidden number input on element click

I’m having a requirement of displaying designed number field with formatting and etc…

I need when clicked on the designed element to open the phone keyboard and insert numbers, when inserting I will attach it to ng-model and update the designed input.

I’ve tried to create directive to click the hidden element, but it doesnt open the keyboard nor focusing the hidden element.

Any suggestions?