ngRepeat error when removing child directive from parent directive - angularjs

Question

I´m having some issues with a gallery manager component where you can add/remove the pictures.
This is the html code of the gallery handler:
<img src = '{{snapshot}}' >
<div class = 'md-button l3' is-file ng-model = 'picture' blob-url = 'snapshot'>Upload</div>
<div class = 'md-button l3' ng-click = 'article.pictures.push(picture)'>Add</div>
<div gallery-manager = 'article.pictures'></div>
Below, the directives:
.directive("galleryManager", function($compile){
var controllerFn = function($scope, $element, $attrs){
var self = this;
self.removeItemAt = function($index){
self.pictures.splice($index, 1);
$compile($element)($scope); <--Note this
}
}
var linkFn = function($scope, $element, $attrs){
}
return {
template:"<div gallery-item = 'picture' ng-repeat = 'picture in galleryManagerCtrl.pictures track by $index'></div>",
restrict:"A",
controller:controllerFn,
controllerAs:"galleryManagerCtrl",
bindToController:{
pictures:"=galleryManager",
}
}
})
.directive("galleryItem", function(FileService){
var linkFn = function($scope, $element, $attrs, galleryManagerCtrl){
$scope.galleryItemCtrl.galleryManagerCtrl = galleryManagerCtrl;
}
var controllerFn = function($scope, $element, $attrs){
var self = this;
if ( self.item instanceof File ){
FileService.buildBlobUrl(self.item).then(function(blobUrl){
self.thumb = blobUrl;
})
}
}
return{
template:"<img src = '{{galleryItemCtrl.thumb}}'>"+
"<a class = 'delete' ng-click = 'galleryItemCtrl.galleryManagerCtrl.removeItemAt($index)'>&times</span></a>",
restrict:"A",
require:"^galleryManager",
link:linkFn,
controller:controllerFn,
bindToController:{
item:"=galleryItem",
},
controllerAs:"galleryItemCtrl"
}
})
Right now, the directive is working well when adding elements, but problems come when removing items; before using: $compile($element)($scope) after the deletion, in the gallery, always dissapeared the last item, although the pictures array removed the correct item, so I added the $compile line after deleting an item.
The problem is that, although the gallery now does what I want to, it keeps throwing an error after compiling (post the full trace, maybe it can help someone):
angular.js:13920 TypeError: Cannot read property 'insertBefore' of null
at after (http://localhost/www/project/admin/bower_components/angular/angular.js:3644:13)
at JQLite.(anonymous function) [as after] (http://localhost/www/project/admin/bower_components/angular/angular.js:3728:17)
at domInsert (http://localhost/www/project/admin/bower_components/angular/angular.js:5282:35)
at Object.move (http://localhost/www/project/admin/bower_components/angular/angular.js:5488:9)
at ngRepeatAction (http://localhost/www/project/admin/bower_components/angular/angular.js:29865:26)
at $watchCollectionAction (http://localhost/www/project/admin/bower_components/angular/angular.js:17385:13)
at Scope.$digest (http://localhost/www/project/admin/bower_components/angular/angular.js:17524:23)
at ChildScope.$apply (http://localhost/www/project/admin/bower_components/angular/angular.js:17790:24)
at HTMLAnchorElement.<anonymous> (http://localhost/www/project/admin/bower_components/angular/angular.js:25890:23)
at defaultHandlerWrapper (http://localhost/www/project/admin/bower_components/angular/angular.js:3497:11)
That seems to come from watchCollection at ngRepeatDirective.
I have the feeling that I´m missing something basic, but can´t see what is right now, so, here I come to ask before digging into angular code.
Thank you in advance.
EDIT
Added a working sample:
http://codepen.io/sergio0983/pen/rMEMoJ?editors=1010
EDIT 2
Removed $compile from working sample, it makes it work, yes, but throws errors; and besides, I think the real problem is elsewhere. In the working sample, you can see how file names get updated when you delete an item, but the pictures keep their original order.

Answer 1

add addPicture() function to your mainController (which will add constant unique ID ro the picture object):
.controller("mainController", function($scope){
$scope.article = {pictures:[]};
$scope.addPicture = function addPicture (picture) {
// set unique ID
picture.id = $scope.article.pictures.length;
$scope.article.pictures.push(picture);
};
})
change add button HTML to:
<div class='md-button l3' ng-click='addPicture(picture)'>Add</div>
change template of galleryManager to track by picture.id:
<div gallery-item='picture'
ng-repeat='picture in galleryManagerCtrl.pictures track by picture.id'></div>
modify removeItemAt() function, ($compile not needed here):
self.removeItemAt = function removeItemAt (id) {
// find index for the picture with given id
id = self.pictures.findIndex((item) => item.id === id);
self.pictures.splice(id, 1);
}
modified codepen: http://codepen.io/anon/pen/mrZOre?editors=1010