How to test angular http get call that changes dom structure?

I have a small directive which simply uses http get to get an image by its name, and on success, the image data is appended to the corresponding element.

module.directive('myImage', function($http, $templateCache) {
    return {
        restrict: 'E',
        scope: {
        name: '@'
    },
    link: function link(scope, element) {
        scope.$watch('name', function(name) {
            $http.get('content/images/' + name.trim() + '.svg', {cache: $templateCache})
                .success(function(data) {
                    element.html(data);
                });
            });
        }
    };
});

So the following statement:

<my-image name="cat"></my-image>

will become like this after http call successes:

<my-image name="cat">
    <svg>...</svg>
</my-image>

I would like to test this directive and ensure that the dom structure is correct after the http get call successes (a.k.a: has tag within tag).

I know that I can use $httpBackend.expectGet to mock the return data. However, problem is that in this case, the test won't go into the success block, which is the place where the image data gets appended to the element.

I am new to front-end development. Can anyone suggest any idea? Or perhaps I shouldn't have tried to test dom structure from the beginning?