Сохранить значения области при перемещении шаблона в ng-repeat

Question

У меня есть две коллекции, связанные с пользовательским интерфейсом, которые заполняют через ng-repeat

Во что я включил ng-include="template.html"

<div>
  <div ng-repeat="item in items1">
    <ng-include src="item.template"></ng-include>
   </div>
</div>

<div>
   <div ng-repeat="item in items2">
     <ng-include src="item.template"></ng-include>
   </div>
</div>

И мои шаблоны как ниже

<script type="text/ng-template" id="template1.html">
    <div ng-controller="controller1"> <input ng-model="a"/></div>
</script>

И в моем контроллере, как показано ниже

myApp.controller("MainCtrl", function ($scope) {
    $scope.items1 = [];
    $scope.items2 = [];

    var item1 = {
        name: "1",
        template: "template1.html"
    };
    var item2 = {
        name: "2",
        template: "template2.html"
    };
    var item3 = {
        name: "3",
        template: "template3.html"
    };

    $scope.items1.push(item1);
    $scope.items1.push(item2);
    $scope.items1.push(item3);

    $scope.reAddItem = function () {
        $scope.items2.push($scope.items1.pop());
    }
});

и другой контроллер, на который ссылаются в шаблоне, как показано ниже

myApp.controller("controller1", function ($scope) {
    console.log("Initialized");
    $scope.a = 'hello';
});

теперь я хочу сохранить переменные области видимости контроллера, когда я перемещаю элементы из одной коллекции в другую (если я ввел какое-то значение в поле ввода, то значение области должно сохраниться при перемещении по коллекции), но angular всегда создает новую область и уничтожить предыдущие значения области, когда шаблоны повторно добавляются в ng-repeat.

Но я не хочу этого и сохраняю один и тот же шаблон при перемещении по коллекциям, так как я могу это сделать?

играть на скрипке

В приведенном выше скрипте я хочу ту же переменную области видимости, если я что-то изменить в поле ввода и переместить его в другую коллекцию

Answer 1

Как кто-то прокомментировал что-то вроде этого может работать

var item1 = {
    name: "1",
    hoo:'asdfasdf',
    template: "template1.html"
};
var item2 = {
    name: "2",
    hoo:'adddddddsdfasdf',
    template: "template2.html"
};
var item3 = {
    name: "3",
    hoo:'asdfasdffffffffffff',
    template: "template3.html"
};

а также

<script type="text/ng-template" id="template2.html">
   <div ng-controller="controller2"> <input ng-model="item.hoo"/></div>
</script>