title: angularjs ng-style: background-image isn't working
body: <p>I'm trying to apply a background image to a div by using the angular <code>ng-style</code> ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working.</p>
  
  <pre><code>&lt;nav
      class="navigation-grid-container"
      data-ng-class="{ bigger: isNavActive == true }"
      data-ng-controller="NavigationCtrl"
      data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
      data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
      data-ng-show="$parent.navInvisible == false"
      data-ng-animate="'fade'"
      ng-cloak&gt;
  
      &lt;ul class="navigation-container unstyled clearfix"&gt;
          &lt;li
              class="navigation-item-container"
              data-ng-repeat="(key, item) in navigation"
              data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
              data-ng-mouseenter="isActive = true; isInactive= false"
              data-ng-mouseleave="isActive = false; isInactive= true"&gt;
  
              &lt;div data-ng-switch on="item.id"&gt;
  
                  &lt;div class="navigation-item-default" data-ng-switch-when="scandinavia"&gt;
                      &lt;a class="navigation-item-overlay" data-ng-href="{{item.id}}"&gt;
                          &lt;div class="navigation-item-teaser"&gt;
                              &lt;span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }"&gt;{{item.teaser}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                      &lt;span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="navigation-item-last" data-ng-switch-when="static"&gt;
                      &lt;div class="navigation-item-overlay"&gt;
                          &lt;div class="navigation-item-teaser"&gt;
                              &lt;span class="navigation-item-teaser-text"&gt;
                                  &lt;img data-ng-src="{{item.teaser}}"&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;span class="navigation-item-background"&gt;
                          &lt;img class="logo" data-ng-src="{{item.images.logo}}"&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="navigation-item-default" data-ng-switch-default&gt;
                      &lt;a class="navigation-item-overlay" data-ng-href="{{item.id}}"&gt;
                          &lt;div class="navigation-item-teaser"&gt;
                              &lt;span class="navigation-item-teaser-text"&gt;{{item.teaser}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                      &lt;span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Though, if I do try a background color, it seems to be working fine. I tried a remote source and a local source too <code>http://lorempixel.com/g/400/200/sports/</code>, neither worked.</p>