JSFiddle - React, Tailwind, and code Playground

HTML

No controller, everything in template.
<div ng-init="bg = ''" ng-mouseenter="bg = 'http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100'" ng-mouseleave="bg = ''" style="background-image: url({{bg}});"></div>

Using vars to store the values (uses a controller)
<div ng-controller="myCtrl" ng-mouseenter="bg1 = imageOn" ng-mouseleave="bg1 = imageOff" style="background-image: url({{bg1}});"></div>

Using a directive (probably should be done this way...)
<div ng-controller="withDirective" hover-bg-image="{{image}}"></div>

CSS

/* so you can see it */
div{
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    margin-bottom: 20px;
}

JavaScript

var app = angular.module("myApp",[])
.directive('hoverBgImage',function(){
    return {
        link: function(scope, elm, attrs){
            elm.bind('mouseenter',function(){
                this.style.backgroundImage = 'url('+attrs.hoverBgImage+')';
            });
            elm.bind('mouseleave',function(){
                this.style.backgroundImage = '';
            })
        }
    };
});

function myCtrl($scope){
    $scope.bg1 = "" // this is the default image.
    $scope.imageOn = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
    $scope.imageOff = ""; // image that would after after the mouse off.
}

function withDirective($scope){
    $scope.image = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
}