Angular directives using $templateRequest

Question

So I am injecting same HTML templates on button click and after I entered name in input tag with angular directives.

These are my directives:

$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));
            });           
        });
    };
});

This is my HTML template I'm injecting:

<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>

So when I injecting first time all looks good, but when I injecting second time both first and second templates becomes with the same value, and that's what happens with third and fourth and so on...

As I understand it is because $templateRequest after first injection puts template to $templateCache and that's why all templates becomes with the same name.

How could I overcome this problem and make every injection be with different names?

Answer 1

So if anyone will collide with this kind of problem, I corrected my code. One of my directives now looks like this:

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

I compiled additional <div> tag and made my html name value to be set with jquery and not angular's $scope variable.