title: Angular phone number directive using intl-tel-input lib
body: <p>I am currently trying to create a custom directive that would initialize an input with the following lib : <a href="https://github.com/Bluefieldscom/intl-tel-input" rel="noreferrer">intl-tel-input</a> .</p>
  
  <p>So I downloaded the required .js file with bower: </p>
  
  <pre><code>&lt;script src="bower_components/intl-tel-input/build/js/intlTelInput.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Then I create my input :</p>
  
  <pre><code>input type="tel" class="form-control" id="tel" name="tel" ng-model="informations.tel" ng-keyup="checkPhoneFormat()" ng-click="checkPhoneFormat()"&gt;
  </code></pre>
  
  <p>And I'm initializing it at the beginning of my controller like this :</p>
  
  <pre><code>angular.element('#tel).intlTelInput({
      validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
      preferredCountries: ['en', 'fr']
  });
  </code></pre>
  
  <p>My problem is that when I'm trying to access the <code>informations.tel</code>model, it is always undefined. It seems that the input do not update the model value on the fly.</p>
  
  <p>So I have to write something like this to bind the actual value of my input field with my non updated model value :</p>
  
  <pre><code>    $scope.checkPhoneFormat = function(){
          $scope.informations.telephone = angular.element('#telephone').val();
          ...}
  </code></pre>
  
  <p>It could be ok but I would like to create a custom directive to initialize such inputs, something like :</p>
  
  <pre><code>app.directive('phoneInput', function (PhoneFactory) {
      return {
          require: 'ngModel',
          restrict: 'A',
          scope: {
              phoneNumber: '='
          },
          link: function (scope, element, attrs, ctrl) {
              element.intlTelInput({
                   validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
                   preferredCountries: ['en', 'fr']
              });
  
              ctrl.$parsers.unshift(function(viewValue) {
                  console.log(viewValue);
              });
          }
      };
  });
  </code></pre>
  
  <p>But as ngModel is undefined the initialization function is never reached... Do you have any idea how I could solve my problem?</p>