Angular Directive in ng-repeat generating randomly uncorrect DOM - angularjs

Question

Hello i have a directive like this in my ASP MVC application + Kendo Upload (doesn't matter)
<div ng-repeat="dp in dealerphotos" class="imgbox">
<div ng-if="dp.DealerPhotoId != 0">
<div class="img-wrapper">
<a data-lightbox="{{ dp.DealerId }}{{ dp.PhotoId }}{{ dp.FileName }}" data-title="{{ dp.FileName }}" href="~/Upload/{{ dp.DealerId }}/{{ dp.PhotoId }}/{{ dp.FileName }}">
<img ng-src="~/Image/Resized?size={{ resize }}&dealerId={{ dp.DealerId }}&photoId={{ dp.PhotoId }}&fileName={{ dp.FileName }}" alt="" class="uploaded" center-preview />
</a>
</div>
<div class="btnblock">
<button ng-click="changePhoto(dp.DealerPhotoId, dp.PhotoId, $index)" title="#Resources.Strings.ButtonChange"><span class="icon pencil"></span></button>
<button ng-click="removePhoto(dp.DealerPhotoId)" title="#Resources.Strings.ButtonRemove"><span class="icon trash"></span></button>
</div>
</div>
<div ng-show="dp.DealerPhotoId == 0" ng-attr-class="{{ (dp.IsFirstMandatory || dp.IsFirstMandatoryIfInstalled) ? 'mandatory' : '' }}">
<input name="files"
type="file"
kendo-upload
k-multiple="false"
k-async="{ saveUrl: '/Steps/Save', autoUpload: true }"
k-select="onSelect"
k-error="onError"
k-success="onSuccess"
k-upload="onUpload"
title="#Resources.Strings.ButtonAdd" />
<div class="mandatory-marker">
<p ng-if="dp.IsFirstMandatory">#Resources.Strings.StepMandatory</p>
<p ng-if="!dp.IsFirstMandatory && dp.IsFirstMandatoryIfInstalled" class="installed">#Resources.Strings.StepMandatoryIfInstalled</p>
</div>
</div>
</div>
With .js code:
//IFFE
(function () {
var app = angular.module("app");
app.directive('tripleUploadDirective', ['$http', function () {
var controller = [
'$scope', '$http', function ($scope, $http) {
$scope.dealerPhotoId = null;
$scope.removePhoto = function (id) {
swal({
title: "", text: localization.StepRemoveConfirm, type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: localization.AlertYesRemove,
closeOnConfirm: true,
animation: "slide-from-top"
}, function () {
$http.post("/Steps/Remove", { dealerPhotoId: id }).then(function (data) {
for (var i = 0; i < data.data.length; i++) {
if (i == 0 && data.data[i].DealerPhotoId == 0) {
if ($scope.mandatory)
data.data[i].IsFirstMandatory = true;
if ($scope.mandatoryifinstalled)
data.data[i].IsFirstMandatoryIfInstalled = true;
}
}
$scope.dealerphotos = data.data;
});
});
};
$scope.changePhoto = function (dealerPhotoId, id, index) {
swal({
title: "", text: localization.StepChangeConfirm, type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: localization.AlertYesChange,
closeOnConfirm: true,
animation: "slide-from-top"
}, function () {
$scope.dealerPhotoId = dealerPhotoId;
var uploadinput = angular.element("#div_" + id + " input[name=files]")[index];
angular.element(uploadinput).click();
});
};
$scope.onSelect = function (e) {
$.each(e.files, function (index, value) {
var ok = value.extension.toLowerCase() == ".jpg" || value.extension == ".jpeg";
if (!ok) {
e.preventDefault();
swal({ title: "", text: localization.StepValidateExtension, type: "error", confirmButtonText: localization.AlertOK, animation: "slide-from-top" });
}
});
};
$scope.onError = function (e) {
swal({ title: "", text: e.XMLHttpRequest.response, type: "error", confirmButtonText: localization.AlertOK, animation: "slide-from-top" });
$scope.$apply();
};
$scope.onSuccess = function (e) {
if (e.response != null) {
for (var i = 0; i < e.response.length; i++) {
if (i == 0 && e.response[i].DealerPhotoId == 0) {
if ($scope.mandatory)
e.response[i].IsFirstMandatory = true;
if ($scope.mandatoryifinstalled)
e.response[i].IsFirstMandatoryIfInstalled = true;
}
}
$scope.dealerphotos = e.response;
$scope.$apply();
}
};
$scope.onUpload = function (e) {
e.data = { photoId: $scope.photoid, dealerPhotoId: $scope.dealerPhotoId };
$scope.dealerPhotoId = null;
};
}];
return {
restrict: 'EAC',
scope: {
dealerphotos: '=dealerphotos',
photoid: '=photoid',
mandatory: '=mandatory',
mandatoryifinstalled: '=mandatoryifinstalled',
resize: '=resize'
},
replace: true,
templateUrl: '/Directives/TripleUpload',
controller: controller
};
}]);
})();
This directive is used in ng-repeat:
<div ng-repeat="step in matrixCtrl.allSteps" class="m-step">
<div class="step-title">{{step.stepIndex}} | {{ step.Name }}</div>
<div triple-upload-directive dealerphotos="step.dealerPhotos" photoid="step.PhotoId" resize="170" mandatory="step.IsMandatory" mandatoryifinstalled="step.IsMandatoryIfInstalled" class="img-uploder {{ step.IsMandatory ? 'mandatory' : '' }}"></div>
</div>
I am setting allSteps in matrixCtrl in success() callback of $http.get().
My problem is the very strange behaviour of ng-repeat.. sometimes (very randomly), my DOM is not generated correctly. (all directives are rendered only in last ng-repeat iteration), in other iterations there are only titles.
Incorrect rendering image: