carousel slider not working with angular js controller - angularjs

Question

I have been using carousel slider in my application and works fine with this code
JS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$scope.stores = ["Emil", "Tobias", "Linus"];
});
CsHtml
<div class="container" ng-app="myApp" ng-controller="offerCtrl">
<div class="dynamicTile">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in stores">
<div id="{{ 'tile' + ($index + 1) }}" class="tile">
<a href="#" class="rippler rippler-default">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" ng-repeat="x in stores" ng-class="{'active': $first}">
<img src="~/assets/images/Stores/{{x.StoreId}}/Product/{{y.ProductId}}.png" class="img-responsive" />
<span class="caption"><i class="fa fa-tags"></i>{{y.ProductName}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row " style="">
<div class="col-sm-12">
Show All
</div>
</div>
</div>
</div>
but when i changed my JS code to fetch data dynamically, carousel stop working i.e. images not sliding.
Problem occur with this jS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$http.get("..//Home/getOffers")
.then(function (response) { $scope.stores = response.data; });
});
What causing the problem ?