jquery - javascript ajax not updating variable on time -

i'm sure easy, messing ajax calls here. pretty new javascript don't know i'm doing wrong. i've tried online , can't calls work @ correct time. appreciated.

all trying nhl player data json table created using angularjs. right table displayed when $scope.players undefined, once ajax completes has data. not displaying @ right time, table empty

rostercontroller related code:

(function () {     'use strict';      angular.module("devilsfanapp")         .controller("rostercontroller", rostercontroller);      function rostercontroller($rootscope, $scope, rosterservice) {         $scope.players = rosterservice.players;          $scope.addplayer = addplayer;         $scope.updateplayer = updateplayer;         $scope.deleteplayer = deleteplayer;         $scope.selectplayer = selectplayer;         $scope.fetchplayers = fetchplayers;          function init() {             fetchplayers(function(res){                 $scope.players = rosterservice.players;                 console.log("goalies now", $scope.players);             });         }         init();          function fetchplayers(callback) {             var players = rosterservice.updateplayers(function(res){                 callback(players);             });         }        } })(); 

rosterservice:

function rosterservice($rootscope) {     var model = {         players: [],         updateplayers: updateplayers,         setcurrentplayer: setcurrentplayer,         getcurrentplayer: getcurrentplayer,         findplayerbyname: findplayerbyname,         findallplayers: findallplayers,         createplayer: createplayer,         deleteplayerbyid: deleteplayerbyid,         updateplayer: updateplayer,         findplayerbyid: findplayerbyid     };     return model;      function updateplayers(callback){         $.ajax({             url: url,             datatype: 'json',             type: 'get',         }).done(function(response) {             var data = angular.fromjson(response);             (var g = 0; g < data.goalie.length; g++) {                 var player = model.findplayerbyname(data.goalie[g].name);                 if (player == null) {                     var newplayer = {                         _id: (new date).gettime(),                         name: data.goalie[g].name,                         position: data.goalie[g].position,                         height: data.goalie[g].height,                         weight: data.goalie[g].weight,                         birthday: data.goalie[g].birthdate,                         age: 25,                         birthplace: data.goalie[g].birthplace,                         number: data.goalie[g].number                     };                     model.players.push(newplayer);                 }                 else{                     callback(null)                 }             }             return callback(model.players)         });     } 

rosterview table code:

<tr ng-repeat="player in players">     <td>{{player.number}}</td>     <td>{{player.name}}</td>     <td>{{player.position}}</td>     <td>{{player.height}}</td>     <td>{{player.weight}}</td>     <td>{{player.birthday}}</td>     <td>{{player.age}}</td>     <td>{{player.birthplace}}</td>     <td>         <div class="col-sm-4 btn-group">             <button ng-click="deleteplayer($index)" type="button" class="btn btn-table">                 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>             </button>             <button ng-click="selectplayer($index)" type="button" class="btn btn-table">                 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>             </button>         </div>     </td> </tr> 

they way you're trying implement seems of "jquery way", different how angular works. first of all, avoid callbacks, use promises instead. also, if option, use $http or restangular instead.

an example of service following suggestions (the example fetchplayers funcionality):

angular.module('mymodule', []) .service('playersservice', ['$http', function($http){     this.fetchplayers = function(){         return $http.get(url);     } }]) .controller('playerctrl', ['$scope', 'playersservice', function($scope, playersservice){     $scope.players = []; //start empty array     this.fetchplayers = function(){         playersservice.fetchplayers.then(function(players){             //here can process data need             $scope.players = players; //assign property in scope template can see         });     };     this.fetchplayers(); //invoke fetch on load }]) 

here can find controller in project performs crud operations $http , handles response show them in table, , here implementation of service perform calls backend api.