Use directive with different controllers in AngularJS?
<p>I have created a directive for a search box which i want to use with different views. Here is the directive - </p>

<pre><code>angular.module('jobSeekerApp')
  .directive('searchBoxDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'templates/searchbox-template.html',
    };
  });
</code></pre>

<p>template for the directive - </p>

<pre><code>&lt;span class="searchButton"&gt;&lt;i class="fa fa-search fa-2x"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input ng-change="search()" ng-model="searchTerm" ng-keydown="deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/&gt;
</code></pre>

<p>I want to use this directive on two views which look like this - </p>

<p>View 1 - </p>

<pre><code>&lt;div class="panel panel-default companies" ng-repeat="company in companies.companiesList"&gt;
    &lt;div class="panel-heading text-center"&gt;&lt;a ng-href="/companies/{{company.id}}" class="hvr-sink"&gt;&lt;h3 class="well"&gt;{{company.company_name}}&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="panel-body text-center flexcontainer"&gt;
        &lt;div&gt;Location: {{company.location}}&lt;/div&gt;
        &lt;div&gt;Founded In: {{company.founded_year}}&lt;/div&gt;
        &lt;div ng-if="company.opening"&gt;Opening: Yes&lt;/div&gt;
        &lt;div ng-if="!company.opening"&gt;Opening: No&lt;/div&gt;
        &lt;div&gt;Number Of Openings: {{company.no_openings}}&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>View 2 - </p>

<pre><code>&lt;div class="panel panel-default jobs" ng-repeat="job in jobs.jobsList"&gt;
    &lt;div class="panel-heading text-center"&gt;&lt;a href="{{job.career_url}}" target='_blank' class="hvr-sink"&gt;&lt;h3 class="well"&gt;{{job.job_name}}&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="panel-body text-center flexcontainer"&gt;
        &lt;div&gt;Company: {{job.company_name}}&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>As you can see i am using aliases <code>companies</code> and <code>jobs</code> in my views, due to this my directive is not able to affect the view it is contained in. If i use the <code>companies</code> or <code>jobs</code> in my template , then it works fine. So for example if change the template to - </p>

<pre><code>&lt;span class="searchButton"&gt;&lt;i class="fa fa-search fa-2x"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input ng-change="companies.search()" ng-model="companies.searchTerm" ng-keydown="companies.deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/&gt;
</code></pre>

<p>Then it works with the view associated with <code>companies</code> controller and similarly for <code>jobs</code>.</p>

<p>How can i use the directive with the respective controller instance?
Thank you.</p>