AngularJS - Error : Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I am using RestAngular to make the Rest Call

_getMerchantData : function() { var deferred = $q.defer(); var service = Restangular .all('UrbanLife'); service .one('service') .one('api') .one('v1') .one('businessowner') .one('getUserInfo') .get() .then( function(response) { countrylist = response; deferred.resolve(response); }, function(response) { deferred.reject(response); } ); return deferred.promise; } 

Controller On change function of md-select

$scope.onActionChange= function(){ if($scope.welcome.action==="editProfile"){ $scope.getUserProfile(); } }; $scope.getUserProfile=function(){ merchantService.merchantManager.UpdateUserProfileFlag=true; merchantService.merchantManager.emailValidate = false; window.location = "#/signup?EditParam="+true; }; 

Controller of second page which is giving this error. It fetches and shows tha data. _____________________________________________________________________________

/*------registrationCtrl------------*/ app.controller( 'registrationCtrl', [ '$scope', 'merchantService', 'tokenService', 'photoService', '$http', '$modal', '$location', function($scope, merchantService, tokenService, photoService, $http, $modal, $location) { $scope.checkIfUpdateProfile=function(){ var params=$location.search(); console.log("params.EditParam "+params.EditParam); if(params.EditParam){ $scope.editUserProfile=true; $scope.disableName=true; $scope.disableMobile=true; merchantService.merchantManager ._getMerchantData() .then( function(data) { photoService.showImg=true; merchantService.merchantManager.updateData=data; $scope.user = merchantService.merchantManager.merchant; merchantService.merchantManager.merchant.updateId=data.user.id; $scope.user.firstname = data.user.firstName; $scope.user.middleName = data.user.middleName; $scope.user.lastName = data.user.lastName; $scope.user.eemail = data.user.emailId; $scope.user.telephone = data.user.contactNumber; photoService.signupPath=data.user.photoUrl; $scope.path = photoService.signupPath; $scope.showImg = photoService.showImg; }, function(response) { console.log("Error "+ response); } ); } } } ] ); <!-- language: lang-html --> <!---#WelcomePage-------> <div class="abcdPage" ng-controller="welcomeBusinessCtrl" ng-init="checkUsertokenwelocme();"> <md-toolbar class="header" layout="row" layout-align="space-between start"> <h1 class="logo">UrbanLife</h1> <div class="top-right"> <ul> <li> <div class="profile-photo"></div> <span class="welcome-user">Welcome {{username}}!</span> <md-select required name="" ng-model="welcome.action" flex="" ng-change="onActionChange()"> <md-option value="editProfile">Edit Profile</md-option> <md-option value="editPayment">Edit Payment</md-option> <md-option value="Logout">Logout</md-option> </md-select> </li> </ul> </div> </md-toolbar> </div> ________________________________________________________________________________ <!-- #Signup---> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <md-toolbar class="header dark-header" layout="row" layout-align="space-between start"> <h1 class="logo">UrbanLife</h1> <h5>Already a Merchant? <a href="#/login">SignIn</a></h5> </md-toolbar> <md-content ng-controller="registrationCtrl" class="signuppage" ng-init="checkIfUpdateProfile();"> <div flex layout="column"> <div class="reg-top"> <h2> <span class="reg-top-title">Basic Information</span> <md-button class="md-primary md-fab md-raised">1</md-button> <span class="hz-line"></span> <md-button class="md-primary md-fab" ng-disabled=" (userForm.fName.$dirty && userForm.fName.$invalid) || (!userForm.fName.$dirty && userForm.fName.$invalid) || (userForm.email.$dirty && userForm.emailaddress.$invalid) || (!userForm.email.$dirty && userForm.emailaddress.$invalid) || (userForm.telephone.$dirty && userForm.telephone.$invalid) || (!userForm.telephone.$dirty && userForm.telephone.$invalid) || (userForm.password.$dirty && userForm.password.$invalid) || (!userForm.password.$dirty && userForm.password.$invalid) || (userForm.confirm_password.$dirty && userForm.confirm_password.$invalid)|| (!userForm.confirm_password.$dirty && userForm.confirm_password.$invalid) || (imageInvalide) " ng-click="nextPage()" >2</md-button> </h2> </div> <form name="userForm" novalidate> <div layout="row" flex> <div layout="column" class="md-padding form-content" flex="60"> <label class="match-label">Name<span class="mandate-field"> * </span></label> <div layout layout-sm="column"> <md-input-container flex> <label>First Name</label> <input type="text" name="fName" ng-model="user.firstname" ng-maxlength="20" required ng-blur="user.fnamevar=true" ng-model-options="{updateOn:'blur'}" ng-disabled="disableName"> </md-input-container> <md-input-container flex> <label>Middle Name</label> <input ng-model="user.middleName" ng-maxlength="20" ng-disabled="disableName"> </md-input-container> <md-input-container flex> <label>Last Name</label> <input ng-model="user.lastName" ng-maxlength="20" ng-disabled="disableName"> </md-input-container> <div class="pointer" ng-show="editUserProfile" layout="row" layout-align="center center" ng-click="disableName=false; serverSuccess=false;"> <i class="fa fa-pencil-square-o"></i> </div> </div> <!-- First Name validation --> <div class="validation-messages" ng-show="user.fnamevar"> <div ng-messages="userForm.fName.$error"> <div ng-message=" required">first name is required</div> <div ng-message="maxlength">Your first name is too long</div> </div> </div> <div layout layout-sm="column"> <md-input-container flex="80"> <label>Email<span class="mandate-field"> * </span></label> <input type="email" name="emailaddress" ng-model="user.eemail" ng-model-options="{ updateOn: 'blur'}" required inuse ng-blur="user.email=true; changeValidateFlag();" ng-disabled="editUserProfile" /> </md-input-container> <div ng-if="(user.emailflag)&&userForm.emailaddress.$pending">Checking Availability...</div> </div> <div class="validation-messages" ng-show="user.email"> <div ng-messages="userForm.emailaddress.$error" ng-messages-include="messages.html"></div> </div> <div layout layout-sm="column"> <md-input-container flex="80"> <label>Mobile<span class="mandate-field"> * </span></label> <input ng-model="user.telephone" type="tel" name="telephone" ng-maxlength="15" ng-pattern="/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/" ng-blur="user.telvar=true" ng-model-options="{updateOn:'blur'}" required ng-disabled="disableMobile"/> </md-input-container> <div class="pointer" ng-show="editUserProfile" layout="row" layout-align="center center" ng-click="disableMobile=false; serverSuccess=false;"> <i class="fa fa-pencil-square-o"></i> </div> </div> <div class="validation-messages" ng-show="user.telvar"> <div ng-messages="userForm.telephone.$error"> <div ng-message="required">Mobile Number is required</div> <div ng-message="pattern">Invalid mobile number</div> <div ng-message="maxlength">Your Mobile number is too long</div> </div> </div> <div layout layout-sm="column" ng-hide="editUserProfile"> <md-input-container flex="80"> <label>Password<span class="mandate-field"> * </span></label> <input type="password" name="password" ng-model="user.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,20}$/" required ng-blur="user.passvar=true" ng-model-options="{updateOn:'blur'}" /> </md-input-container> </div> <!-- Password Validation --> <div class="validation-messages" ng-show="user.passvar"> <div ng-messages="userForm.password.$error"> <div ng-message="required">Password is required</div> <div ng-message="pattern">Password must contain at least ONE upper case letter, lower case letter, number, & special character</div> <div ng-message="maxlength">Passwords must be between 8 and 20 characters.</div> <div ng-message="minlength">Passwords must be between 8 and 20 characters.</div> </div> </div> <div layout layout-sm="column" ng-hide="editUserProfile"> <md-input-container flex="80"> <label>Retype Password<span class="mandate-field"> * </span></label> <input ng-model='user.password_verify' type="password" name='confirm_password' required data-password-verify="user.password" ng-blur="user.rpassvar=true" ng-model-options="{updateOn:'blur'}"> </md-input-container> </div> <!-- Retype password --> <div class="validation-messages" ng-show="user.rpassvar"> <div ng-messages="userForm.confirm_password.$error"> <div ng-message="required">Please confirm your password.</div> <div ng-message="passwordVerify">Passwords do not match.</div> </div> </div> <div class="success-messages" ng-show="serverSuccess"> <div>Profile information updated successfully.</div> </div> <div class="success-messages" ng-show="infonotupdated"> <div>Profile information not updated. Please try Again</div> </div> <!-- added for pop up --> <div> <script type="text/ng-template" id="UpdateProfileSpinner.html"> <div class="modal-header"> </div> <div class="modal-body" layout="row" layout-align="start start" style="height:100px; overflow: auto; "> <div flex><p>Updating your profile information......</p></div> <div layout="column" layout-align="center start"> <md-progress-circular md-mode="indeterminate" md-diameter="24"></md-progress-circular> </div> </div> </script> </div> <div layout="row" ng-hide="editUserProfile"> <md-button class="md-raised md-primary blue-btn" ng-disabled=" (userForm.fName.$dirty && userForm.fName.$invalid) || (!userForm.fName.$dirty && userForm.fName.$invalid) || (userForm.emailaddress.$dirty && userForm.emailaddress.$invalid) || (!userForm.emailaddress.$dirty && userForm.emailaddress.$invalid) || (userForm.telephone.$dirty && userForm.telephone.$invalid) || (!userForm.telephone.$dirty && userForm.telephone.$invalid) || (userForm.password.$dirty && userForm.password.$invalid) || (!userForm.password.$dirty && userForm.password.$invalid) || (userForm.confirm_password.$dirty && userForm.confirm_password.$invalid)|| (!userForm.confirm_password.$dirty && userForm.confirm_password.$invalid) || (imageInvalide) " ng-click="nextPage()" >Continue</md-button> </div> <div layout="row" ng-show="editUserProfile"> <md-button class="md-raised md-primary blue-btn" ng-click="updateUserProfile()">Save</md-button> <md-button class="cancelbtn md-raised md-primary blue-btn" ng-click="Cancelupdate()">Cancel</md-button> </div> </div> <div class="extra-content" layout="column" layout-align="start center" flex="20"> <div class="upload-photo" layout="column" layout-align="center top" ng-click="serverSuccess=false;"> <span class="file-upd-icon"> <img ng-src="{{path}}" ng-show="showImg" width="80px" height="80px"/> </span> <div class="fileUpload btn btn-primary"> <span id="upload">Upload Photo</span> <input type="file" id="file" file-model="photo" class="upload" ng-init="imageInvalide=false;filename=null; fromPage='signup'" /> </div> </div> <div class="upload-messages" layout="column" laout-align="start center"> <div class="imageInvalideMsg" ng-show="imageInvalide">Please choose image of format .jpg, .jpeg, .png, or .gif only</div> </div> </div> </div> </form> </div> </md-content> <md-toolbar class="footer" layout="column" layout-align="center end"> <h6>&copy; 2015 Urban Life</h6> </md-toolbar> <!-- end snippet --> 

I have a select list on my Angular HTML page,I have used md-select for it. On change of md-select I get redirected to the another page. While loading this second HTML page I am hiding few markup's or elements on this page.

While doing so its giving me this error. Please help, Thanks in Advance.

Error : Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

checkIfUpdateProfile function:

$scope.checkIfUpdateProfile=function(){ var params=$location.search(); console.log("params.EditParam "+params.EditParam); if(params.EditParam){ $scope.editUserProfile=true; $scope.disableName=true; $scope.disableMobile=true; merchantService.merchantManager ._getMerchantData() .then( function(data) { photoService.showImg=true; merchantService.merchantManager.updateData=data; $scope.user = merchantService.merchantManager.merchant; merchantService.merchantManager.merchant.updateId = data.user.id; $scope.user.firstname = data.user.firstName; $scope.user.middleName = data.user.middleName; $scope.user.lastName = data.user.lastName; $scope.user.eemail = data.user.emailId; $scope.user.telephone = data.user.contactNumber; photoService.signupPath=data.user.photoUrl; $scope.path = photoService.signupPath; $scope.showImg = photoService.showImg; }, function(response) { console.log("Error "+ response); } ); } }