DOM swapping in Angular JS - angularjs

Question

Basically I have two Divs in a page out of which only one will be visible at a time.
I have a text input placed inside my first div which is shown my default.
Now if the first div is hidden and the second DIV is shown,
I want to swap the text input DOM in to the second DIV. The ID of the textinput and the value it has needs to be retined on swapping.
I have a reference of the text input to be swapped in my custom directive (ref-comp in the below snippet).
How can i achieve this in angularJS ? Please help me here.
<div id="1">
<div id ="container1">
<input type="text" id="text1">
</input>
</div>
<div id ="container1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
</div>

Answer 1

Please have a look on it this might be help.
var app = angular.module('myApp', []);
app.controller('IndexCtrl', function($scope) {
$scope.showme = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="1" data-ng-app="myApp" data-ng-controller="IndexCtrl">
<div id ="container1" ng-show="showme">
value of text filed of div 1: {{divAVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divAVarialbe.text1">
</input>
</div>
<div id ="container1" ng-show="!showme">
value of text filed of div 2 : {{divBVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divBVarialbe.text1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
<button ng-click="showme = !showme" ng-show="!showme">Show div 1</button>
<button ng-click="showme = !showme" ng-show="showme">Show div 2</button>
</div>
You can use ng-show to swap the div and and scope variables to access the input filed of the DOM.
suppose that if use to scope variable lets say divAVarialbe and divBVariable.
then for div A divAVarialbe will be use i.e all the child model will be go inside divAVarialbe so your data str will be
divAVarialbe={"text1":"value of textfild","otherModel":"",...}
same for Div B.
In this way you can differentiate the DOM.
It base on how much you have knowledge of Object.
assume it like mvc pattern then it will be easy to code.
might be this will help.