AngularJS can't set value textarea

Question

I'm trying to set default values for some elements in a form and while it works for all the input fields, it doesn't seem to work for the textarea, while the code is almost the same.

HTML for the form:

<form class="form-horizontal" id="infoForm" name="form" ng-submit="ctrl.submitInfoForm(form)" novalidate>
    <div class="form-group">
        <label for="inputEditName">Name</label>
        <input type="text" class="form-control" value="{{ctrl.viewedName}}" id="inputEditName" ng-model="viewUser.name">
    </div>
    <div class="form-group">
        <label for="inputEditLocation">Location</label>
        <input type="text" class="form-control" value="{{ctrl.viewedLocation}}" id="inputEditLocation" ng-model="viewUser.location">
    </div>
    <div class="form-group">
        <label for="inputEditWebsite">Website</label>
        <input type="text" class="form-control" value="{{ctrl.viewedWebsite}}" id="inputEditWebsite" ng-model="viewUser.website">
    </div>
    <div class="form-group">
        <label for="inputEditBio">Bio</label>
        <textarea rows="3" class="form-control" id="inputEditBio" ng-model="viewUser.bio" >{{ctrl.viewedBio}}</textarea>
    </div>
    <button type="submit" class="btn btn-default">Save Changes</button>
</form>

Relevant parts of ProfileController.js:

var vm = this;
vm.getViewedName = getViewedName;
vm.getViewedLocation = getViewedLocation;
vm.getViewedWebsite = getViewedWebsite;
vm.getViewedBio = getViewedBio;
vm.viewedName = getViewedName();
vm.viewedLocation = getViewedLocation();
vm.viewedWebsite = getViewedWebsite();
vm.viewedBio = getViewedBio();

function getViewedName() {
    if (vm.viewedName === undefined) {
        var viewedName;
        var viewedUser = UserService2.getViewedUser();
        viewedName = viewedUser.name;
        if (viewedName === "") {
            viewedName = "-";
        }
        return viewedName;
    } else {
        return vm.viewedName;
    }
}

function getViewedLocation() {
    if (vm.viewedLocation === undefined) {
        var viewedLocation;
        var viewedUser = UserService2.getViewedUser();
        viewedLocation = viewedUser.location;
        if (viewedLocation === "") {
            viewedLocation = "-";
        }
        return viewedLocation;
    } else {
        return vm.viewedLocation;
    }
}

function getViewedWebsite() {
    if (vm.viewedWebsite === undefined) {
        var viewedWebsite;
        var viewedUser = UserService2.getViewedUser();
        viewedWebsite = viewedUser.website;
        if (viewedWebsite === "") {
            viewedWebsite = "-";
        }
        return viewedWebsite;
    } else {
        return vm.viewedWebsite;
    }
}

function getViewedBio() {
    if (vm.viewedBio === undefined) {
        var viewedBio;
        var viewedUser = UserService2.getViewedUser();
        viewedBio = viewedUser.bio;
        if (viewedBio === "") {
            viewedBio = "-";
        }
        return viewedBio;
    } else {
        return vm.viewedBio;
    }
}

By default only the name is set so at that moment it looks like this:

Name : myname Location: - Website: - Bio:

Answer 1

I found out what I did wrong.

First of all I was I had a ngModel and the field of a controller attachted to the textarea (and also the other inputs), so I removed the field and now I'm just using the ngModel.

Secondly, I forgot to put ctrl. in my ngModel attributes. This I changed by simply adding ctrl. to my ngModel attributes.

So I have changed it all, it works now and it looks like this:

HTML:

<form class="form-horizontal" id="infoForm" name="form" ng-submit="ctrl.submitInfoForm(form)" novalidate>
    <div class="form-group">
        <label for="inputEditName">Name</label>
        <input type="text" class="form-control" id="inputEditName" ng-model="ctrl.viewUser.name">
    </div>
    <div class="form-group">
        <label for="inputEditLocation">Location</label>
        <input type="text" class="form-control" id="inputEditLocation" ng-model="ctrl.viewUser.location">
    </div>
    <div class="form-group">
        <label for="inputEditWebsite">Website</label>
        <input type="text" class="form-control" id="inputEditWebsite" ng-model="ctrl.viewUser.website">
    </div>
    <div class="form-group">
        <label for="inputEditBio">Bio</label>
        <textarea rows="3" class="form-control" id="inputEditBio" ng-model="ctrl.viewUser.bio" ></textarea>
    </div>
    <button type="submit" class="btn btn-default">Save Changes</button>
</form>

ProfileController.js:

var vm = this;
vm.getViewedUser = getViewedUser;
vm.viewUser = getViewedUser();


function getViewedUser() {
    if (vm.viewUser === undefined) {
        vm.viewUser = UserService2.getViewedUser();
        if (vm.viewUser.name === "") {
            vm.viewUser.name = "-";
        }
        if (vm.viewUser.location === "") {
            vm.viewUser.location = "-";
        }
        if (vm.viewUser.website === "") {
            vm.viewUser.website = "-";
        }
        if (vm.viewUser.bio === "") {
            vm.viewUser.bio = "-";
        }
        return vm.viewUser;
    } else {
        return vm.viewUser;
    }
}

While the answer of Founded1898 and the comment of Vinod Louis helped, I felt like those didn't completely answer my question and that's the reason I added this answer.

Answer 2

From the Docs:

ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

So, in your Case, angular is trying to bind the Textarea to the viewUser.bio property. Since it does not exist, it will create it with an empty Value, which then 'overwrites' the ctrl.viewedBio you gave in the html.

Simple way to resolve your issue:

In your Controller (in a Init function or something like this..)

vm.viewUser.bio = vm.viewedBio