angularjs: ng-src equivalent for background-image:url(...)

This one works for me

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

ngSrc is a native directive, so it seems you want a similar directive that modifies your div's background-image style.

You could write your own directive that does exactly what you want. For example

app.directive('backImg', function(){    return function(scope, element, attrs){        var url = attrs.backImg;        element.css({            'background-image': 'url(' + url +')',            'background-size' : 'cover'        });    };});​

Which you would invoke like this

<div back-img="<some-image-url>" ></div>

JSFiddle with cute cats as a bonus: http://jsfiddle.net/jaimem/aSjwk/1/

The above answer doesn't support observable interpolation (and cost me a lot of time trying to debug). The jsFiddle link in @BrandonTilley comment was the answer that worked for me, which I'll re-post here for preservation:

app.directive('backImg', function(){    return function(scope, element, attrs){        attrs.$observe('backImg', function(value) {            element.css({                'background-image': 'url(' + value +')',                'background-size' : 'cover'            });        });    };});

Example using controller and template

Controller :

$scope.someID = ...;/* The advantage of using directive will also work inside an ng-repeat :someID can be inside an array of ID's */$scope.arrayOfIDs = [0,1,2,3];

Template :

Use in template like so :

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

or like so :

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>