Повторная директива angularjs с внешним шаблоном не отображается должным образом при добавлении новых элементов массива.

Следующий скрипт отображает 3 столбца инкрементных чисел, представляющих директивы с разными шаблонами: один встроенный, один предварительно загруженный и один из внешнего шаблона. Когда вы выбираете кнопку "добавить", столбцы увеличиваются. Столбец, представляющий директиву с внешним шаблоном, как представляется, создает новый массив, когда кнопка добавления подталкивает новый элемент к существующему массиву и затем выдает следующую ошибку:

TypeError: невозможно вызвать метод 'insertBefore' из null

Любые идеи, что происходит?

http://jsfiddle.net/jwanga/EaRHD/

angular.module('app',[]).controller('controller', function($scope){

    $scope.items = [1,2,3,4,5,6,7,8,9];
    $scope.add = function(){

        $scope.items.push($scope.items[$scope.items.length - 1]+1);

    }

}).directive('item1', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        template:'<li>{{data}}</li>'
    }
}).directive('item2', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'item.html'
    }
}).directive('item3', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'https://s3.amazonaws.com/thedigitalself-public/jsfiddle-EaRHD-template.html'
    }
});