title: Html file as content in Bootstrap popover in AngularJS directive
body: <p>I have an Angular directive to handle Bootstrap popovers as shown in the code below. In my directive I'm setting the popover content to a HTML string, which I think is ugly. 
  What I wanna do is to use an "template.html" file instead of HTMLstring. In that way I will be able to use the same directive with different template files depending on which type of popover I wanna show. That's my plan anyway.</p>
  
  <p>So, how do I in the best way load html code from my template.html and use it instead of the HTMLstring in the AngularJs directive below?</p>
  
  <pre><code>app.directive('mypopover', function ($compile) {
  
  var HTMLstring = "&lt;div&gt;&lt;label class='control-label' style='color: rgb(153, 153,153)'&gt;Search&lt;/label&gt;&amp;nbsp;&amp;nbsp;"+"&lt;input placeholder='Search assignment' ng-model='searchText' type='text' class='form-control'&gt; &lt;br&gt;"+"&lt;label class='control-label' style='color: rgb(153, 153, 153)'&gt;Select an assignable&lt;/label&gt;"+"&lt;p ng-repeat='p in projects | filter:searchText'ng-click='createEvent(user.id,date)'&gt;"+"{{p.title}}&lt;/p&gt;&lt;/div&gt;";
  
  var getTemplate = function (contentType) {
      var template = '';
      switch (contentType) {
          case 'user':
              template = HTMLstring;
              break;
      }
      return template;
  }
  return {
      restrict: "A",
      link: function (scope, element, attrs) {
          var popOverContent;
          if (scope.user) {
              var html = getTemplate("user");
              popOverContent = $compile(html)(scope);                    
          }
          var options = {
              content: popOverContent,
              placement: "right",
              html: true,
              date: scope.date
          };
          $(element).popover(options);
      },
      scope: {
          user: '=',
          date: '='
      }
  };
  });
  </code></pre>