title: How to add attributes of element to angular directive
body: <p>I'm new to angular. I want to write a directive which has all the attributes that I added to it when using in html. For example: </p>
  
  <p>This is my directive</p>
  
  <pre><code>'use strict';
  app.directive('province', function($compile) {
      return {
          restrict: 'E',
          link: function (scope, element, attrs, controller) {
              var markup = "&lt;select&gt;&lt;/select&gt;";
              var elem = angular.element(element);
              elem.replaceWith($compile(markup)(scope));
           }
      };
  
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;province class="form-control" data-target"elemntId"&gt;&lt;/province&gt;
  </code></pre>
  
  <p>I want my <code>&lt;select&gt;</code> contain the class and other attributes that I added to directive in html. </p>
  
  <p>output that I want: <code>&lt;select class="form-control" data-target="elementId"&gt;&lt;/select&gt;</code></p>
  
  <p>I used <code>angular.element(element).attr(attr);</code>, but it does not worked;</p>
  
  <p>Any help is appreciated in advance.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I want all the attributes that exist in attrs of link function to be added to <code>markup</code>.</p>