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

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({{}});" ng-repeat="exercise in allExercies | filter:searchText | limitTo:limit"> 

   <div class="thumbnailImage" ng-style="{'background-image' : 'url({{exercise.FrontImageId}}.jpg)'}">

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

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

why don’t you just use

<div class="thumbnailImage" style="background-image:url({{exercise.FrontImageId}}.jpg)">


Well that works 10 points to you… :slight_smile: