Why Angular JS “ng-repeat” is not working? - angularjs

Question

I have this owl crousal :
<section id="intro">
<div class="sm-holder">
<div class="sm">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
<h1>
<span class="year">2020</span>
</h1>
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;">
<div class="owl-item cloned active">
<div class="item" style="background: url(../Administration/MainPageHeader/camels1.jpg)">
</div>
</div>
<div class="owl-item cloned">
<div class="item" style="background: url(../Administration/MainPageHeader/camels5.jpg)">
</div>
</div>
</div>
</div>
</div>
<div class="owl-counter"></div>
</section>
it work ok.
noW
I need to make it dyanmic.
i want to rpeat
and changing camels1.jpg based on value from DB.
I have created angualr app.
in my scope
I have
$http.get('http://192.168.1.40/Test/Apis/GetHeaderImages.ashx')
.then(function (response) {
$scope.headerImages = response.data;
var arr2 = JSON.parse(JSON.stringify(response.data));
$scope.headerImages = arr2;
});
here headerImages = 0: {Id: 5, ImageUrl: "camels7.jpg"} 1: {Id: 6, ImageUrl: "20202902051438KC.jpg"}
I did
أهلاَ بكم في
إتحاد سباقات الهجن
2020
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer" >
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;"id="owl-stage">
<div class="owl-item cloned" ng-repeat="x in headerImages" >
<div class="item" style="background: url(../Administration/MainPageHeader/{{x.ImageUrl}})">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="owl-counter"></div>

Answer 1

got it working with asp.net tags
<div class="owl-carousel owl-intro">
<div class="item" style="background: url(../Administration/MainPageHeader/camels5.jpg)"></div>
<%foreach (var item in imagesUrl)
{%>
<div class="item" style="background: url(<%=item %>)">
</div>
<%
} %>
</div>
<div class="owl-counter"></div>
so ng-repeat was not repeating dives

Answer 2

You should assign it to $scope.headerImages rather than headerImages in API callback.
$scope.headerImages = arr2;