Using jQuery AJAX GET with AngularJS not updating view

Question

I have the following AngularJS controller:

function MemberCtrl($scope){
    $.ajax({
        url: "/getmembers",
        type: "get",
        success:function(data){
            $scope.members = data.member_list;
            console.log($scope.members); //works fine
        } 
    });
}

My view looks like this:

 <div ng-controller="MemberCtrl">
    <ul>
       <li ng-repeat="member in members">
        <span>{{member.name}}</span>
       </li>
    </ul>
 </div>

As you can see in the first block of code I make a simple AJAX GET to my resource which returns fine in my console.log(). However, nothing changes in my view. I'm guessing this is an issue with the success: being async, but I'm not sure how to fix that.

Thanks for any help!

Carpetfizz

possible duplicate of Using jQuery's $.ajax within an angularJS controller — Jonathan Lonowski
– Jonathan Lonowski, Commented Mar 15, 2014 at 22:45

Jon Koops · Accepted Answer · 2014-03-15 22:46:09Z

2

You should use the built in $http service.

function MemberCtrl( $scope, $http ) {

    $http.get('/getmembers')
    .success(function( data, status, headers, config ) {
        $scope.members = data.member_list;
    });

}

answered Mar 15, 2014 at 22:46

Jon Koops

9,4206 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carpetfizz Over a year ago

Thanks this works perfectly, I will accept in 6 mins when I can.

Collectives™ on Stack Overflow

Using jQuery AJAX GET with AngularJS not updating view

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related