Угловые директивы, использующие $ templateRequest

Поэтому я нажимаю те же HTML-шаблоны при нажатии кнопки и после ввода имени в тег ввода с угловыми директивами.

Это мои директивы:

$scope.folder_name = '';
$scope.folder_count = 0;

cheapWatcherApp.directive("addfolder", function () {
    return {
        restrict: "E",
        templateUrl: chrome.extension.getURL('views/folderName.html')
    }
});

cheapWatcherApp.directive("addfolder", function ($compile, $templateRequest)    {
    return function ($scope, $element, $attrs) {
        $('.createBtn').bind("click", function () {
            $scope.folder_count++;
            $scope.folder_name = document.getElementById('folder_name').value;
            $templateRequest(chrome.extension.getURL('views/newFolder.html')).then(function (html) {
                var template = angular.element(html);             
                angular.element(document.getElementById('space-for-folders')).append($compile(template)($scope));
            });           
        });
    };
});

Это мой HTML-шаблон, который я вводил:

<div class="new_folder">
    <div class="folder_icon">
        <div class="folder_icon_border">
            <div class="folder_icon_bubble"></div>
            <div class="folder_icon_bubble"></div>
            <div class="folder_icon_bubble"></div>
        </div>
    </div>
    <div class="folder_name">
        <p class="folder_name_txt">{{folder_name}}</p>
    </div>
</div>

Поэтому, когда я впервые впрыскиваю, все выглядит хорошо, но когда я впрыскиваю второй раз, как первый, так и второй шаблоны становятся с одинаковым значением, а то, что происходит с третьим и четвертым и так далее...

Насколько я понимаю, это потому, что $ templateRequest после первой инъекции ставит шаблон в $ templateCache и поэтому все шаблоны становятся с тем же именем.

Как я мог преодолеть эту проблему и сделать каждую инъекцию разными именами?