AngularJS - hide table template until form submitted using custom directive - angularjs

Question

I have the following code that makes a PUT request and displays the
modified data returned from the server in a table. Right now, when
the page is loaded, an empty table is displayed until the button is clicked.
What I require is that the table be hidden until the button is clicked. How
do I accomplish this?
<div ng-app="myApp" ng-controller="formController">
<script type="text/ng-template" id="tableTemplate.html">
<table>
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.id }}</td>
<td>{{ x.email }}</td>
<tr>
</tbody>
</table>
</script>
<form ng-submit="processForm()">id :
<input type="text" name="id" ng-model="formData.id">email :
<input type="email" name="email" ng-model="formData.email">
<input type="submit" value="go">
</form>
<div my-directive></div>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective', function() {
return {
replace: true,
restrict: 'EA',
templateUrl: 'tableTemplate.html'
}
});
app.controller("formController", function($scope,$http) {
$scope.formData = {};
$scope.processForm = function(){
// PUT /users/id
var url = 'http://www.example.com/users/' + $scope.formData.id;
var data = '{"email":"' + $scope.formData.email}';
$http({method: 'PUT', url: url, data: data}).success(function(response){
$scope.names = response;
});
}
});
</script>

Answer 1

In the HTML:
<table ng-show="formSubmitted">
In the controller $http success() function:
$scope.formSubmitted = true;