Finding HTML control by its ID in angularJS

This example will shows you how to find an HTML element by it's id in angularJS. Like jQuery there is no inbuilt method to find element (angular element) in angularJS. So to find the element we need to use the JavaScript method document.querySelector() and pass it to angular.element() method to convert the JavaScript element to angular element.

Syntax:

var elem = angular.element(document.querySelector("#controlID"));

Example:

Source Code:

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> </head> <body> <form> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" id="txtInput" value="Hello" /> <input type="button" id="btnShow" value="Show" ng-click="showval();" /> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.showval = function () { alert(angular.element(document.querySelector("#txtInput")).val()); }; }); </script> </form> </body> </html>