AngularJS Weird Render Issue

I basically have a JSON file with from which im building some blocks. One of the properties of the JSON is a background-image path for a div. Something along the lines of: [ ..

Solution 1:

Because {{facts.smallimg}} is invalid css it is trucated by IE and when the angular compiler scans all attributes, the style attribute is empty.

You can use ng-style, but it requires a object notation, and doesn't accept a string containing css rules.

<div class="fact-img" ng-style=" {backgroundImage: 'url(\'' +  fact.largeimg + '\')'} "> ...

Although the ng-style solution works, you might prefer to write a my-background-image directive or use an <img /> tag with ng-src. which would result in a cleaner template.