title: How an autocomplete/lookahead directive can be used in a decoupled way for multiple separate inputs using separate services?
body: <p>Currently I have three inputs that I need to use autocomplete on that look something like that:</p>
  
  <pre><code>&lt;div class="actor-container"&gt;
     &lt;input type="text" class="actors"/&gt; 
  &lt;/div&gt;
  &lt;div class="movie-container"&gt;
     &lt;input type="text" class="movies"/&gt; 
  &lt;/div&gt;
  &lt;div class="director-container"&gt;
     &lt;input type="text" class="directors"/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I also have my own autocomplete directive</p>
  
  <pre><code>&lt;div my-autocomplete="my-autocomplete" service="serviceName"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The autocomplete is getting a serviceName as an input to access different data repositories (search in different pools) using an $injector</p>
  
  <p>What is the best AngularJS practice to connect this directive with the other three inputs? 
  I was thinking of putting it in each input like that:</p>
  
  <pre><code>&lt;div class="actor-container"&gt;
     &lt;input type="text" class="actors" my-autocomplete="my-autocomplete" service="actorService"/&gt; 
  &lt;/div&gt;
  &lt;div class="movie-container"&gt;
     &lt;input type="text" class="movies" my-autocomplete="my-autocomplete" service="movieService"/&gt; 
  &lt;/div&gt;
  &lt;div class="director-container"&gt;
     &lt;input type="text" class="directors"  my-autocomplete="my-autocomplete" service="directorService"/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>But is this good practice? Or the directive should be placed "outside" once and then use shared service/broadcast/watch etc to communicate with the each of the three inputs using three separate controllers?</p>
  
  <pre><code>&lt;div class="actor-container" ng-controller="addActorCtrl"&gt;
     &lt;input type="text" class="actors"/&gt; 
  &lt;/div&gt;
  &lt;div class="movie-container" ng-controller="addMovieCtrl"&gt;
     &lt;input type="text" class="movies"/&gt; 
  &lt;/div&gt;
  &lt;div class="director-container" ng-controller="addDirectorCtrl"&gt;
     &lt;input type="text" class="directors"/&gt; 
  &lt;/div&gt;
  &lt;div my-autocomplete="my-autocomplete" service="serviceName(how to pass that??)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What should happen is someone should type in each of those fields and the appropriate autocomplete based on a serviceName and what the user input should pop up. Then the user will click on one of the returned entries and this should be added to the right container. I also wonder where the code object.movies.push() (e.g for the movies - when the user clicks a suggested movie) will be placed..</p>
  
  <p>I would really appreciate if you could provide an example with some code because I am fairly new in AngularJS and I think this would be useful for others too :)</p>
  
  <p>Thanks</p>