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

Answer 1

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;
    });

}