title: Add custom Directive to existing Input that already has angular directives [ng-model/ng-required]
body: <p>I would like to use a standard input control that is decorated with <code>ng-model</code> and <code>ng-required</code> and then add my own custom attribute directive that provides <code>uib-typeahead</code> functionality to the control.</p>
  
  <p>I used this link to get my directive partly working.</p>
  
  <p><a href="https://stackoverflow.com/questions/19224028/add-directives-from-directive-in-angularjs">Add directives from directive in AngularJS</a></p>
  
  <p><a href="https://embed.plnkr.co/49qRYunWuE4zNWO6PRpA/" rel="nofollow noreferrer">PLUNKR - The Version 2 of the directive does not work correctly with ng-model</a></p>
  
  <p>My Directive does add typeahead functionality and that works quite well, but it is not binding the model on to the control after item is selected.</p>
  
  <p>I have two version of my directive.</p>
  
  <p><strong>Version 1</strong>: is an element style directive and I have been using it successfully for a while, but it fell short when I wan't to have a bit more control over the input element, especially when I wanted to use ng-required='true' and other ng-message directives.</p>
  
  <p><strong>Version 2</strong>: is an attribute style directive, I went with this because I felt it was better to just add the typeahead functionality that I wanted to any standard HTML that can optionally use <code>ng-required='true'</code>, <code>ng-model</code> etc...</p>
  
  <p>While this directive is mostly working, it does not interact correctly with <code>ng-model</code> and I'm not sure how to get it working</p>
  
  <pre><code>angular.module(APP)
  
  .directive('wkLocationSuggest', ['$compile', function ($compile) {
    return {
      restrict: 'A',
      require: 'ngModel',
      replace: false,
      //terminal: true,
      //priority: 0,
      scope: {
        wkApiModel: '=' // Provide access to the internal data that is returned via the API lookup
      },
      controller: 'LocationSuggestController',
      link: function (scope, element, attrs, ngModelCtrl) {
        if (!ngModelCtrl) {
          return;
        }
  
        element.attr('typeahead', 'location as row.location for row in typeAhead($viewValue)');
        element.attr('typeahead-wait-ms', '750');
        element.attr('typeahead-on-select', 'onSelectInternal($item, $model, $label)');
        element.attr('typeahead-min-length', '2');
        element.attr('typeahead-focus-first', 'true');
  
        element.removeAttr("wk-location-suggest");        //remove the location-suggest to avoid indefinite loop
        element.removeAttr("data-wk-location-suggest");   //also remove the same attribute with data- prefix if it exists
  
        // None of this is working
        //// invoked when model changes from the outside
        //ngModelCtrl.$render = function () {
        //  //scope.innerModel = ngModelCtrl.$modelValue;
        //};
  
        ////// invoked when model changes from the inside
        //scope.onChange = function (value) {
        //  ngModelCtrl.$setViewValue(scope.innerModel);
        //};
  
        scope.onSelectInternal = function ($item, $model, $label) {
  
          // This fires, but it effects the ng-model on the first input, 
          // but not the input that this directive is attached too
          ngModelCtrl.$setViewValue($item.location);
  
        };
  
        $compile(element)(scope);
  
      }
    };
  }]);
  </code></pre>
  
  <p><strong>These two images demonstrate part of the problem, may be better to test for yourself using PLUNKR above</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FOBwz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FOBwz.png" alt="Version 1 &amp; 2 of the directive in action"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3tTUB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3tTUB.png" alt="Version 2 not working correctly"></a></p>