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.

don't use `$.ajax` , use `$http` . Also read docs for `ng-model` it is not for displaying text. — charlietfl, Feb 23 '16 at 21:31

score 1 · Accepted Answer · edited May 23 '17 at 12:07

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

edited May 23 '17 at 12:07

Community

1
1

answered Feb 23 '16 at 21:29

LJ.Wizard

605
1
6
10

strangely, it shows a blank line. let me have a look again – Ayesha Feb 23 '16 at 21:30
If it's not working, there might be a problem in your app setup, in which case you would need to post the core components of your code. – LJ.Wizard Feb 23 '16 at 21:32
oh yea, it worked. thanks for clearing my concept of ng-model and ng-bind. – Ayesha Feb 23 '16 at 21:34

Not able to bind angularjs controller variable to html page

1 Answers1