title: Compile directive before template is rendered
body: <p>I'm making a directive for a States Select in angular.  It's working, but I spent a while trying to figure out a way to compile the template before it's in the DOM. It currently works like this:</p>
  
  <pre><code> app.register.directive('stateDropdown', ['StatesFactory', '$compile', function (StatesFactory, $compile) {
          function getTemplate(model) {
              var html = '&lt;select ng-model="' + model + '" ng-options="state.abbreviation as state.name for state in states" class="form-control"&gt;&lt;/select&gt;';
              return html;
          }
  
          function link (scope, element, attrs) {
              scope.states = StatesFactory.States;
              element.html(getTemplate(attrs.stateModel));
              $compile(element.contents())(scope);
          }
          return {
              replace: true,
              link: link
  
          }
      }]);
  </code></pre>
  
  <p>But as such it inserts the template into the element THEN compiles it against scope.  Is there a better way to do this? Such as compiling the template before it's even inserted?</p>