var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('mypopover', function ($compile,$templateCache) {
    var getTemplate = function (contentType,scope,element) {
       
        var template = $templateCache.get("templateId.html");
        
        $.ajax({
                type: "GET",
                url: 'test.html',
                type: 'get',
                dataType: 'html',
                success: function (data) {
                  console.log($(template))
                   var options = {
    
                   content: $(template).html(data),
                   placement: "right",
                   html: true,
                   date: scope.date
                   };
                  $(element).popover(options);
                },
                  error: function (data) {
                 
                    
                  }
            });
       
        return template;
    }
   return {
     restrict: "A",
    
    link: function (scope, element, attrs) {
     console.log('entering link')
     var popOverContent;
     
     popOverContent = getTemplate("user",scope,element);
    // popOverContent=$templateCache.get("a.html")
     //popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);
     //console.log(popOverContent);
     //console.log(scope)
    
     
     }
     };
});
<!DOCTYPE html>
<html >

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker">
    <div ng-controller="MainCtrl">
      <script type="text/ng-template" id="templateId.html">
          <div  id="Mainnavpanel" data-theme="b"  class="custom-popup">
              <ul >
                  <li><a href="#"  class="btn edit_h"><i class="edit1 space1"></i>Edit</a></li>
                  <li><a href="#" class="btn deleteTestCase_h" ><i class="delete1 space1"></i>Delete</a>
                  </li>
                  <li><a href="#" class="btn copy_h" ><i class="copy1 space1"></i>Copy</a></li>
              </ul>
          </div>
      </script>
          <br>
          <br>
          <br>
      <button>ddd</button>
      <a href="#" mypopover>Click here</a>
      </div>
  </body>

</html>
/* Put your css in here */

this is a simple test file