<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <button type="button" ng-click="toggle_form()">Wrap via jQuery.wrap()</button>
  <button type="button" ng-click="unwrap_form()">Unwrap via e.parent().replaceWith(e)</button>
  <div id="form_container">
    <form name="myForm">
      <input ng-model="full_name" type="text" name="full_name" required ng-minlength="5" />
      {{ myForm.full_name.$error }}
    </form>
  </div>
  <button type="button" ng-click="wrap_form2()">Wrap via native JS</button>
  <button type="button" ng-click="unwrap_form2()">Unwrap via native JS</button>
  <div id="form2_container">
    <form name="myForm2">
      <input ng-model="full_name2" type="text" name="full_name2" required ng-minlength="5" />
      {{ myForm2.full_name2.$error }}
    </form>
  </div>
</body>
</html>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.full_name = null;
  $scope.form2_show = true;
  $scope.toggle_form = function() {
    $('#form_container').attr('some-random-attribute', 'retained');
    $('#form_container').wrap('<div></div>');
  };
  
  $scope.unwrap_form = function() {
    var e = $('#form_container');
    
    e.parent().replaceWith(e);
  };
  
  $scope.wrap_form2 = function() {
    var c = document.getElementById('form2_container');
    var wrapper = document.createElement('div');
    var parent = c.parentNode;
    parent.insertBefore(wrapper, c);
    parent.removeChild(c);
    wrapper.insertBefore(c, null);
  };
  
  $scope.unwrap_form2 = function() {
    var c = document.getElementById('form2_container');
    var wrapper = c.parentNode;
    var parent = wrapper.parentNode;
//    parent.replaceChild(c, wrapper);
    var next = wrapper.nextSibling;
    parent.removeChild(wrapper);
    parent.insertBefore(c, next);
  };

});
/* Put your css in here */