how to test Directive ?geting error Error: Unexpected request: GET DataTable.html

I make a custom directive and trying to unit test them as well but it gives me an error Error: Unexpected request: GET DataTable.html. here is my directive;

       <div my-data remoteurl='url' filter='test' order-by='sortExpression' order='order' >
    </div>

mycontroller:

     (function() {

      'use strict';

         var myApp = angular.module('myApp', [])
        .controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
         $scope.url = 'http://ift.tt/1KEkUhj';
         $scope.filter= 'test';
         $scope.orderBy= 'sortExpression';
         $scope.order= 'orderBy';
}])
.directive('myData', ['$http', function($http) {
  return {
    restrict: 'A',
    scope: {
      remoteurl: '=',
      filter: '=',
      orderBy: '=',
      order: '='
     // orderBy:'sortExpression':'order' ;
    },
    templateUrl: 'DataTable.html',
    link: function(scope, element, attr) {

      $http.get(scope.remoteurl)
        .success(function(response) {
          scope.names = response.data.children;
        });
    }
  };
}]);

})();

my controllerspec:

       describe('unit testing directive', function() {
var $compile,
    $rootScope,
    element;

// Load the myApp module, which contains the directive
beforeEach(module('myApp'));
 beforeEach(module('source/DataTable.html'));
 beforeEach(inject(function(_$compile_, _$rootScope_) {
    scope = _$rootScope_;
    $compile = _$compile_;
    //element=$compile("<h1>{{2+2}}</h1>")($rootScope);

  }));
it('order style should be false in the beginning', function() {

     element = $compile("<div my-data remoteurl='url' filter='test' order-by='sortExpression' order='order'></div>")(scope);
      scope.$digest();
     var isoScope = element.isolateScope();
    expect(isoScope.html()).not.toBeNull();
    //expect(isoScope.html()).not.toBeNull();
 });

});

DataTable.html

         <ul>
                <li >
                   <table  width="80%" id="dataTable" align="center" name="table1">
                            <tr>
                              <td><strong>Title</strong></td>
                              <td><strong>Link</strong></td>
                              <td><strong>Score</strong></td>
                              </tr>
                                <tr ng-repeat="x in names |filter:filter|orderBy:orderBy:order:order">

                               <td id="title"><a  ng-href="{{ x.data.url}}">{{x.data.title}}</a></td>
                               <td ><a ng-href="{{ x.data.url}}">Link</a></td>
                               <td>{{x.data.score}}</td>
                             </tr>
                      </table>
                    </li>
              </ul>

after i ran this getting error as mentioned above how can i test my directive and controller any suggestion welcome and appreciated.thanks in advance