AngularJS: Binary Image not loading

I am trying to use ng-src to load binary image data, however all I am getting in the console is: GET http://localhost:3000/%7B%7D 404 (Not Found) in the console with a broken image in the front end.

I am using the following code to load the image: <img ng-src="{{ event.snapshot }}" />

event.snapshot is lazy loaded with the following code:

$scope.downloadImage = function(imgReady, index) {
    if (imgReady == false) {


        for (var i = $scope.vehicles[index].events.length - 1; i >= 0; i--) {
            var config = {
                method: 'POST',
                url: '/Events/SnapShot',
                data: $scope.vehicles[index].events[i],
                cache: false
            }

            RequestService.makeApiRequest(config).success(function(j) {
                return function(response) {
                    console.log(response.data);
                    $scope.vehicles[index].events[j].snapshot = response.data;
                }
            }(i));

            console.log($scope.vehicles[index].events[i]);
        };
    }
}

When the user pops open an event tab, I am loading the image in. The console.log is showing the data as loaded, and it comes in the following style:

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADGAoADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAA...

I've cut the data short as it is much longer than this, do I need to perform additional massaging to the data? I am confused as to why it is not loading correctly.