How to use ng-style in combination with a http request and ng-repeat?

Question

I'm trying to bind a string from a http request into a ng-style directive: I get the error cat.catBgUrl not found. The response is a string. i.e http://example.com/picture.png What is wrong?

<div ng-repeat="cat in content">
      <a ng-click="goToDetail(cat.place)" nav-transition="none"><div ng-style="{ 'background': 'url({{cat.catBgUrl}})'}" class="bgcat center">
        <div class="inner">
          <h1>{{cat.name}}</h1>
          <h4>{{cat.subTitle}}</h4>
          <img src="img/home/open.png" alt="">
        </div>
      </div></a>
    </div>

Answer 1

You can try this:

<div ng-repeat="cat in content">
      <a ng-click="goToDetail(cat.place)" nav-transition="none">
        <div ng-style="{'background': 'url(' + cat.catBgUrl + ')'}" class="bgcat center">
        <div class="inner">
          <h1>{{cat.name}}</h1>
          <h4>{{cat.subTitle}}</h4>
          <img src="img/home/open.png" alt="">
        </div>
      </div></a>
    </div>