css in angular not working

Question

I am trying to have background image of a div injected dynamically. I see images getting loaded fine but the CSS doesn't change and div never get the background-image. what am I doing wrong

I have the following code:

<style>
#container {
width:100%;
}
.left_column {
float:left;
width:37%;
height: 150px;
/*background-color: red;*/
}
.right_column {
float:right;
width: 37%;
height: 150px;
}
.snipe{
    float: right;
    background-color: red;
    color: white;
    position: relative;
    margin-top: 99%;
}
</style>
<div ng-app="myApp">

    <div ng-controller="ShowCtrl">
        <div class="content-padded">
            <h2>{{zucrew.name}}</h2>
        </div>
        <div  class="topcoat-list__item" hm-tap="open(person.id)" 
              ng-repeat="person in persons" ng-class-odd="'left_column'" ng-class-even="'right_column'" 
              ng-style="{'background-image' : 'url({{person.src}})'}">
            {{ person.name }}

        </div>

    </div>

</div>

Answer 1

Because of the way the ngStyle wants the properties quoted- rather than using the double curlys using the plus sign works:

<div ng-repeat="person in persons"  ng-style="{'background-image': 'url(' + person.src + ')'}">

demo fiddle

Answer 2

You shouldn't need to enclose person.src in curly braces, as you're already working within an expression that will be evaluated by the ngStyle directive. Try this:

  <div  class="topcoat-list__item" hm-tap="open(person.id)" 
          ng-repeat="person in persons" ng-class-odd="'left_column'" ng-class-    even="'right_column'" 
          ng-style="{'background-image' : 'url(person.src)'}">
        {{ person.name }}

    </div>

See http://plnkr.co/edit/qtVH5IuPD44L43D2xHIZ?p=preview for a similar, more simplistic example.