Ionic app using ng-sortable displays weird behaviour


#1

I was trying to create a view for an Ionic app where the user can add/remove/re-order her profile pics using ng-sortable.

Upon first loading, I can remove the pic by clicking the remove button ‘X’ at upper-right-hand corner of the pic. The weird behaviour occurs after I add new pic to the list (either by clicking the red square at the end of the list or the ‘+’ button on the nav bar), then the remove button doesn’t work anymore (the cursor still changes to a pointer but it just won’t receive the click event). The pic can still be added/removed by using the -|+ button on the nav bar. The add and remove is just a simple push() and pop() from the array defined in the scope.

Another strange point is if I click the red square at the upper-right-hand corner (roughly the same position where the ‘X’ button is located), then the newly created pic can be removed, but not others.

I am not sure what have caused this strange behaviour (CSS or Javascript) and I don’t see any error messages from the console. Everything also seems to be fine when inspected using Chrome dev tools.

Please find the demonstration of the problem here: http://codepen.io/terrytong/pen/pgGzEB

I appreciate any pointers on how to debug this. Many thanks!