Why is the code not working in angular?

Question

Angular

Problem:
A new line appears when creating a user, but it is empty.
HTML:

<table class="table table-hover table-condensed" ng-controller="adminController as usersAdmin">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Telephone</th>
          <th>Address</th>
          <th>Street</th>
          <th>City</th>
          <th>State</th>
          <th>Zip</th>
          <th>edit</th>
          <th>delete</th>
        </tr>
      </thead>
      <tbody>
        <form id="creating" role="form" name="newUserForm" ng-controller="formController as form" ng-submit="form.addNewUser()">
        <tr class="newUser">
          <td><input type="text" class="form-control" id="nameNew" placeholder="Name" ng-model="form.newUser.name"></td>
          <td><input type="email" class="form-control" id="mailNew" placeholder="Email" ng-model="form.newUser.email"></td>
          <td><input type="text" class="form-control" id="telephoneNew" placeholder="Telephone" ng-model="form.newUser.telephone"></td>
          <td><input type="text" class="form-control" id="adressNew" placeholder="Address" ng-model="form.newUser.address"></td>
          <td><input type="text" class="form-control" id="streetNew" placeholder="Street" ng-model="form.newUser.street"></td>
          <td><input type="text" class="form-control" id="cityNew" placeholder="City" ng-model="form.newUser.city"></td>
          <td><input type="text" class="form-control" id="stateNew" placeholder="State" ng-model="form.newUser.state"></td>
          <td><input type="text" class="form-control" id="zipNew" placeholder="Zip" ng-model="form.newUser.zip"></td>
          <td><button type="submit" class="btn btn-success saveNew"> save </button></td>
          <td><button type="reset" class="btn btn-danger"> X </button></td>
        </tr>
        </form>
        <tr ng-repeat="user in usersAdmin.users">
          <td class="data" type="text" id="name">{{user.name}}</td>
          <td class="data" type="email" id="mail">{{user.email}}</td>
          <td class="data" type="text" id="telephone">{{user.telephone}}</td>
          <td class="data" type="text" id="adress">{{user.address}}</td>
          <td class="data" type="text" id="street">{{user.street}}</td>
          <td class="data" type="text" id="city">{{user.city}}</td>
          <td class="data" type="text" id="state">{{user.state}}</td>
          <td class="data" type="text" id="zip">{{user.zip}}</td>
          <td><button type="submit" class="btn btn-default" id="editOne"> edit </button></td>
          <td><button type="reset" class="btn btn-danger" id="removeOne"> X </button></td>
        </tr>
      </tbody>
    </table>

JS:

var dataJSON = {"users" : [
          {
            "name"      : "Ivan",
            "email"     : "[email protected]",
            "telephone" : "[phone]",
            "address"   : "Kiev, Ukraine",
            "street"    : "Tumanyana",
            "city"      : "Kyiv",
            "state"     : "kievska",
            "zip"       : "02002"
          },
          {
            "name"      : "Ivan",
            "email"     : "[email protected]",
            "telephone" : "[phone]",
            "address"   : "Kiev, Ukraine",
            "street"    : "Tumanyana",
            "city"      : "Kyiv",
            "state"     : "kievska",
            "zip"       : "02002"
          },
          {
            "name"      : "Ivan",
            "email"     : "[email protected]",
            "telephone" : "[phone]",
            "address"   : "Kiev, Ukraine",
            "street"    : "Tumanyana",
            "city"      : "Kyiv",
            "state"     : "kievska",
            "zip"       : "02002"
          },
          {
            "name"      : "Ivan",
            "email"     : "[email protected]",
            "telephone" : "[phone]",
            "address"   : "Kiev, Ukraine",
            "street"    : "Tumanyana",
            "city"      : "Kyiv",
            "state"     : "kievska",
            "zip"       : "02002"
          },
          {
            "name"      : "Ivan",
            "email"     : "[email protected]",
            "telephone" : "[phone]",
            "address"   : "Kiev, Ukraine",
            "street"    : "Tumanyana",
            "city"      : "Kyiv",
            "state"     : "kievska",
            "zip"       : "02002"

          },
            ]
        };

(function(){
  var app = angular.module('usersAdmin', []);

  app.controller('adminController', function(){
    this.users = dataJSON.users;
  });

  app.controller('formController',function(){
    this.newUser = {};
    this.addNewUser = function(){
      console.log(this.newUser);
      dataJSON.users.push(this.newUser);
      this.newUser = {};
    };
  });
})()

Answer 1

Because you nullified the object:
Objects in JS are copied by reference - if you change something in one place, then the object will change in other places. Before inserting an object into the users array, you need to clone it.
(PS There shouldn't be non-table elements in table - it's wrong to make form inside tbody . )

Answer 2

At the very beginning of the controller, keep a reference to this:
Then, in the handlers, use this variable:

app.controller('formController',function(){
    var vm = this;
    vm.newUser = {};
    vm.addNewUser = function(){
      console.log(vm.newUser);
      dataJSON.users.push(vm.newUser);
      vm.newUser = {};
    };
  });