title: Angular JS pass attributes to directive template
body: <p>I have custom directive for datepicker. I want to reuse it in several different places. But in order to reuse current directive I have to dynamically pass and change different attributes into <code>my-datepicker</code> directive. </p>
  
  <p>If you look inside datepicker.html I am using following attributes: <code>ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened"</code>.</p>
  
  <p>Question: How do I set this attributes on the <code>my-datepicker</code> element level and pass all the way down to my directive html template? I want to achieve something like that: </p>
  
  <pre><code>&lt;my-datepicker ng-model="departureDate1" min-date="minDateDeparture1" is-open="departureOpened1"&gt;&lt;/my-datepicker&gt;
  
  &lt;my-datepicker ng-model="departureDate2" min-date="minDateDeparture2" is-open="departureOpened2"&gt;&lt;/my-datepicker&gt;
  </code></pre>
  
  <p>Thanks for any help!</p>
  
  <p>datepicker-contoller.js</p>
  
  <pre><code>app.directive('myDatepicker', function() {
      return {
          restrict: 'E',
          templateUrl: 'templates/datepicker/datepicker.html'
      };
  });
  </code></pre>
  
  <p>datepicker.html</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;div class='input-group'&gt;
          &lt;input type="text" class="form-control" datepicker-popup ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
              &lt;span ng-click="open1($event)" class="btn btn-default input-group-addon"&gt;
                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
              &lt;/span&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Datepicker usage</p>
  
  <pre><code>    &lt;div ng-controller="MyController"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;my-datepicker&gt;&lt;/my-datepicker&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-2"&gt;
              &lt;my-datepicker&gt;&lt;/my-datepicker&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>