title: get node element by model property angularjs
body: <p>There is a way to get the input that binding a model's property.</p>
  
  <p>I want to do this to blur the search input after I send the form, 
  and I want to do this dynamically for later changes in html source. </p>
  
  <p><strong>Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("MyApp", []);
  
  app.controller('ctrl', function($scope) {
    $scope.term = 'test';
    $scope.submit = function(){
      document.querySelector('#search').blur();
      // I want replace document.querySelector('#search') with something like 'getElementByProp($scope.term)'
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="MyApp"&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-ng-controller="ctrl"&gt;
    &lt;form data-ng-submit="submit()"&gt;
    &lt;input id="search" type="search" data-ng-model="term" /&gt;
    &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>