embeded virtual keyboard in angularjs

Question

I have wrote an angular code for showing a virtual keyboard using angular-virtual-keyboard, The code is working fine and the virtual keyboard is coming fine when we click the text-field. The issue is that I want the virtual keyboard to be shown as directly in the page and not by any click.

How we can achieve this.

Can anyone please help me on this, do we have any other component in angularjs which supports virtual keyboard

My code is as given below

Working Demo

<div ng-app='myApp' ng-controller="Controller">
    Click this textfield to see the Virtual Keyboard<br/><input type='text' ng-model="yourModel" ng-virtual-keyboard/>
</div>

Answer 1

I updated the fiddle with the answer: http://jsfiddle.net/bujvs55h/1/

Just add this directive:

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});