title: How to use custom directive on Input fields in Angular 1.x?
body: <p>I'm trying to modify the <code>input</code> element using a custom AngularJS directive. Basically I want to replace any <code>&lt;input type="country"&gt;</code> fields with a country drop-down.</p>
  
  <p>But the directive doesn't seem to work with <code>input</code> fields. If I change it to any other tag, it works? </p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('plunker', [])
  .controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
  });
  
  
  angular.module('plunker')
  .directive('input', function() {
    return {
      restrict: 'E',
      scope: {ngModel: '=?'},
      link: function(scope, elem, attr) {
        if(attr.type === 'country') {
          elem.html('html code for select');
          alert(elem);
        }
      }
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker" &gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script&gt;document.write("&lt;base href=\"" + document.location + "\" /&gt;");&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl"&gt;
    Name: &lt;input type="country" ng-model="name"/&gt; &lt;br/&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone please explain and <strong>suggest a workaround</strong>?</p>
  
  <p>P.S. I've also tried doing this in the directive, but it doesn't work either!</p>
  
  <pre><code>replace: true,
  template:'&lt;div&gt;hello&lt;/div&gt;'
  </code></pre>
  
  <p>P.S. I know I can use a <code>ng-country</code> or some other custom tag but I want to change <code>input</code> tag only because I want learn why this is happening or possibly find out what I'm doing wrong?</p>