How to bind data in 'value' attribute of <input tag> to NET core MVC model using angular

I’ve been playing around with Upload file - Streaming method. The original code, here:

https://github.com/aspnet/Docs/tree/master/aspnetcore/mvc/models/file-uploads/sample/FileUploadSample

However, I’m trying to get the data in the value attribute of <input value=” ”> using Angular, the idea is that I can POST the value into my MVC model instead of whatever is typed by the user (as in the original code). So, I have done this change to the input value property.

Streaming/Index.cshtml:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
..

<input value="@Model.name” type="text" name="Name" ng-model="name"/>   
..
<button ng-click="createUser()">Create User</button>
..
 </div>
</div>

@section scripts{
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="~/js/app.js"></script>
}

However, with Angular code running under app.js, the following piece of code actually fails with status code 400. This is because the passed value is “” and not the data under of value attribute of the HTML input tag.

App.js:

var User = (function () {
  function User(name) {
    this.name = name;

  }
  return User;
}());

var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;

      element.bind('change', function () {
        scope.$apply(function () {
          modelSetter(scope, element[0].files[0]);
        });
      });
    }
  };
}]);

myApp.service('userService', ['$http', function ($http) {
    this.createUser = function(user) {
        var fd = new FormData();
        fd.append('name', user.name);


        return $http.post('/streaming/upload', fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        });
    };
}]);

myApp.controller('myCtrl', ['$scope', 'userService', function ($scope, userService) {
  $scope.createUser = function () {
    $scope.showUploadStatus = false;
    $scope.showUploadedData = false;

      var user = new User($scope.name);

    userService.createUser(user).then(function (response) { // success
      if (response.status == 200) {
        $scope.uploadStatus = "User created sucessfully.";
        $scope.uploadedData = response.data;
        $scope.showUploadStatus = true;
        $scope.showUploadedData = true;
        $scope.errors = [];
      }
    },
    function (response) { // failure
      $scope.uploadStatus = "User creation failed with status code: " + response.status;
      $scope.showUploadStatus = true;
      $scope.showUploadedData = false;
      $scope.errors = [];
      $scope.errors = parseErrors(response);
    });
  };
}]);

function parseErrors(response) {
    var errors = [];
    for (var key in response.data) {
        for (var i = 0; i < response.data[key].length; i++) {
            errors.push(key + ': ' + response.data[key][i]);
        }
    }
    return errors;
}

The solution must be a simple one, but after much research, I haven’t been able to find out how to modify it to make the data in the value=’’” attribute being passed across. This might be a stupid question but a headache for me however since I’m a total newbie regarding Angular. Please have some mercy, help. Thanks