Ng-style background-image not being applied on initial load

ionic-v1
1

I am using the following to display an image inside a div - using inline styling as I need to position it exactly how I want it.

<div ng-hide="FilteredData" class="thumbnail exercise-thumbnail" ng-click="getExerciseDetail({{exercise.id}});modal.show(1)" ng-repeat="exercise in allExercies | filter:searchText | limitTo:limit"> 

   <div class="thumbnailImage" ng-style="{'background-image' : 'url(http://www.websiteaddress.com/image/medium/{{exercise.FrontImageId}}.jpg)'}">
</div>
<h5>{{exercise.name}}</h5>

This works perfectly when there has been a filter applied or the scope is being updated by some other means however on initial load it is intermittent. When navigating to this view, all exercises are shown with the :limit however it does not seem to pull in the styling.

Kind regards

2

I should add that this works perfectly on in the browser but not on a device.

3

why don’t you just use

<div class="thumbnailImage" style="background-image:url(http://www.websiteaddress.com/image/medium/{{exercise.FrontImageId}}.jpg)">

?

4

Well that works 10 points to you… :slight_smile: