How to Set Background image of div with ng-style

Question

Basically i have a link, and when it's clicked, i display a modal. Now i can display other properties on the modal like title except the background Image ! urghhh !

This is the modal:

<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">                  <div id="modalHeader">                  <div style="padding-top: 10px;">{{selectedMeal.title}}</div>                  </div> </div> 

These are the links:

<div ng-click='selectMeal(meal)' class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}">                     <span id="contentItemHeader">{{ meal.title }}</span>                     <span id="contentItemLevel">{{ meal.level }}</span> </div> 

json:

recipes:[     {       "type": "Breakfast",       "title": "Chili con carne",       "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",       "ratings": 4,       "duration": 12,       "level":"medium",       "url":"http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg",       "ingredients":            [             {               "vegetable": "40ml"             }           ],       "method":            [             {               "1": "In a medium sized stock pot, heat the oil over  heat. Saute onions, chile peppers andgarlic until soft."             }           ]     },      {       "type": "Breakfast",       "title": "Spicy Noodle",       "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",       "ratings": 5,       "duration": 30,       "level":"hot",       "url":"http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg",       "ingredients":            [             {               "vegetable": "40ml"             }           ],       "method":            [             {               "1": "In a  sized stock pot, heat the oil over  heat. Saute onions, chile peppers andgarlic until soft."             }           ]     }] 

Answer 1

You have made some mistakes using single quotes, you have to take your variable outside the single quotes.

For this div

<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}"> 

This part is being treated as a string

'url({{selectedMeal.url}})' 

Whereas you would want angular to parse this variable

{{selectedMeal.url}} 

So to solve this, the correct syntax is

<div class="modalContainer"    ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">