Not able to bind angularjs controller variable to html page

Question

I have a simple query which i am not able to understand why it doesnt work for me.

I have a ajax call and i get data from backend. Here it is.

$.ajax({
    type: "GET",
    url: serviceURL,
}).then(function (response) {
    $scope.$apply(function () {
        $scope.username = response.FirstName;
    });
    console.log($scope.username);
});

I am able to get the console output here. Means ajax works fine. Now i need to display it at the front end. Here is the code for that.

<li ng-model="username">[USERNAME should comeHere]</li>

I have used ng-model to bind the controller side data to front end. So the username should display in between the [] brackets i mentioned above. However, this is not happening.

Can someone tell me what is it tat i am doing wrong. ? I have also used $apply because i read somewhere that this will force it to make the updated changes.

Answer 1

It should be:

<li>{{username}}</li>

This may help to shed light on this: What's the difference between ng-model and ng-bind