AngularJS How to place focus on textbox when button click - angularjs

Question

i have one textbox and few buttons and i want when user will click on any button then textbox will have focus. i tried this way but did not work angular.element("#txtData").focus();
my full code
<div ng-app="myApp" ng-controller="myCtrl">
<table border=2>
<tr>
<td colspan=5><input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')"></td>
</tr>
<tr>
<td><input type=button value="+" ng-click="GetData('+','btnClick')"></td>
<td><input type=button value="-" ng-click="GetData('-','btnClick')"></td>
<td><input type=button value="x" ng-click="GetData('*','btnClick')"></td>
<td><input type=button value="/" ng-click="GetData('/','btnClick')"></td>
<td><input type=button value="=" ng-click="GetData('=','btnClick')"></td>
</tr>
</table>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.GetData = function (arg1, evtType) {
if (evtType === 'btnClick') {
angular.element("#txtData").focus();
}
};
});
js fiddle https://jsfiddle.net/tridip/wzvq5ov8/
i found few same kind of post in this forum and saw people write many code to achieve this by custom directives. i am so new and that is why i do not understand their code. one similar post url here which i checked https://stackoverflow.com/a/15529412/728750
this code angular.element("#txtData").focus(); suppose to work in angular but did not.......do i need to refer any library called jqLite ?
i heard jqLite is inbuilt in angular js...is it true. can anyone tell me why the this code did not function angular.element("#txtData").focus(); from controller function ?

Answer 1

i find out how to place focus with angular directives. here is code
jsfiddle https://jsfiddle.net/tridip/muz887hu/1/
<div class="main" ng-app="myApp">
<p>Name: <input type="text" ng-model="name" id="question1"></p>
<button id='btn' set-focus='question1'>click</button>
</div>
var myApp = angular.module('myApp',[]);
myApp.directive('setFocus',function(){
return {
link: function(scope, element, attrs){
element.bind('click',function(){
//alert(element.attr('id'));
document.querySelector('#' + attrs.setFocus).focus();
})
}
}
})

Answer 2

First of all, you have an eloquent error in your JS console that can lead you on the right way :
VM363 angular.js:12520 Error: [jqLite:nosel] Looking up elements via
selectors is not supported by jqLite! See:
http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.4.8/jqLite/nosel
So, don't use jqLite or jQuery, and use .focus() on the element itself, as simple as possible :
document.querySelector("#txtData").focus();
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.GetData = function(arg1, evtType) {
if (evtType === 'btnClick') {
document.querySelector("#txtData").focus();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border=2>
<tr>
<td colspan=5>
<input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')">
</td>
</tr>
<tr>
<td>
<input type=button value="+" ng-click="GetData('+','btnClick')">
</td>
<td>
<input type=button value="-" ng-click="GetData('-','btnClick')">
</td>
<td>
<input type=button value="x" ng-click="GetData('*','btnClick')">
</td>
<td>
<input type=button value="/" ng-click="GetData('/','btnClick')">
</td>
<td>
<input type=button value="=" ng-click="GetData('=','btnClick')">
</td>
</tr>
</table>
</div>