Refresh/ Re Render the UI once Submit button is clicked

Currently I am using AnularJS to update the value from JSON file and Once I click Submit button , I want to clear the whole DOM and refresh the UI and update the contents. Can you please help here

Here Value1 and Value2 comes from two different functions but sometimes . Value2 will be null and only Value1 will be present. but still Value2 will be shown with Old value and Value1 with updated value after clicking submit button.

Is there any way in AngularJS to refresh the DOM before updating the values. so that once i click submit i should be seeing only Value1

var app = angular.module('myApp', ['angular-loading-bar']);

app.controller("Controller", ["$scope", "$http", "$window",
    function ($scope, $http, $window) {
      
        $scope.firstFunction = function () {
            $http({
                method: 'POST',
                url: 'one.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    "accountnumber": $scope.accountnumber,
                    "environment": $scope.selectedVal,
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;
                $scope.value1 = response.data
              

                //$scope.secondFunction(data);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
        
        
               $scope.secondFunction = function () {
            $http({
                method: 'POST',
                url: 'two.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    "accountnumber": $scope.accountnumber,
                    "environment": $scope.selectedVal,
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;
                $scope.value2 = response.data
                console.log($scope.cellularIPAddressValue);

                //$scope.secondFunction(data);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
   }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp">

    <div ng-controller="Controller">
 <div class="row">
                    
                    <div class="input-group form-search">
                        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
                        <span class="input-group-btn">
                     <button type="submit" ng-click="firstFunction();secondFunction();" class="btn btn-primary">Submit</button>
                     </span>
                        <span id="message">{{value1}}</span>
                       <span id="message">{{value2}}</span>
                    </div>
                </div>
      </div>
    </body>

</html>

Solution

There is no need to refresh UI as angular data-binding does the job.

Changing the ng-click="firstFunction();secondFunction();" to ng-click="value1=null;value2=null;firstFunction();secondFunction();" may help.