AngularJS manipulate background-image set in css

I have a list which items get a default background image:

.defaultListItem > .item-content  {
    background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('../images/BGCardboard.png') no-repeat;
    background-size: cover;
    color: rgb(255,255,255);
}

Now I want to change the background-image dynamically from my controller.

template:

<ion-item class="defaultListItem" ng-repeat="item in items >
     <img ng-src="item.img">
           <div class="itemInfo">
               ....
           </div>
</ion-item>

controller:

app.controller('home', function($scope, $items){
     $scope.items = $items.getItems();

     //check items, and if there's a background-image, set it to the list
     for(item in items)
          if(item.backgroundImage)
              //manipulate css background-image anyhow
});

I don't know how to set the background-image. Any ideas?

Here is a fiddle you can try out.

You're using the Ionic Framework, which is fine but adds a layer that's hard to target. (The .item-content DIV isn't in your template - it looks like Ionic is providing this...)

But regardless, if you're willing to adjust where in your DOM you need this background image, it's easy to set them in Angular. You can use the ngStyle attribute, or you can just use an expression in the style attribute directly. (There are advantages to both - the expression is simple, but ngStyle lets you do complex things with multiple attributes.)

<div style="background-image: url({{ myImageUrl }})"></div>