AngularJS Expression Won't Evaluate in Value Field of Input

Question

What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:

<div class="row-fluid">
    <div class="span4">
        <label for="employeeID">Employee ID</label>
        <input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
    </div>
    <div class="span4">
        <label>First Name</label>
        <input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
    </div>
    <div class="span4">
        <label>Last Name</label>
        <input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <label for="username">Username</label>
        <input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
    </div>
    <div class="span4">
        <label>Password</label>
        <input type="password" class="input-block-level" placeholder="***************">
    </div>
    <div class="span4">
        <label>Role</label>
        <select class="input-block-level">
            <option value="user">User</option>
            <option value="admin">Administrator</option>
        </select>
    </div>
</div>

Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.

Any help you could offer would be greatly appreciated.

Thank you!

Answer 1

<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >

Use ng-change directive.

var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
  $scope.fn = "";
  $scope.ln = "";

  $scope.changed = function () {
    $scope.un = $scope.fn[0] + $scope.ln;
  };

}]);

DEMO