javascript - Angular Asynchronous Timing -


i working on updating list shows twitch information users. should show logo a, name, , if online. currently, grabbing channels , putting them 3 arrays. 1 array twitch channel information contains information on channels. 1 array holds display_name of online users. 1 array holds display_name of offline users.

it works, works if press beginning button. why button necessary , how make list populate without button?

http://codepen.io/crosscris/pen/zgeoor?editors=101

    var app = angular.module('fcctwitchchecker', []);     app.controller('fcctwitchcontroller', function() {     var twitchcheck = this;     var fccstreamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","notmichaelmcdonald","robotcaleb", "medrybw","comster404","brunofin","thomasballinger","joe_at_underflow","noobs2ninjas","mdwasp","beohoff","xenocomagain"];         twitchcheck.alluserschannelobjects = [];     twitchcheck.offlineusers = [];     twitchcheck.onlineusers = [];         var beginningurl= "https://api.twitch.tv/kraken/";     fccstreamers.foreach(function(streamer){       var streamurlstring = beginningurl + "streams/" + streamer + "?client_id=1234chrisclientid4321&callback=?";       var channelurlstring = beginningurl +"channels/" + streamer + "?client_id=1234chrisclientid4321&callback=?";      $.ajax({         type: "get",         datatype: "json",         url: streamurlstring,         success: function(result) {           if(result.stream === null || result.error==="not found") {             twitchcheck.offlineusers.push(streamer);           } else {             twitchcheck.onlineusers.push(streamer);           }         },         error: function() {           console.log("it failed");         }       });       $.ajax({         type: "get",         datatype: "json",         url: channelurlstring,         success: function(result) {           if (result.error !== "not found") {             twitchcheck.alluserschannelobjects.push(result);             if (result.logo === null) {               twitchcheck.alluserschannelobjects[twitchcheck.alluserschannelobjects.length - 1].logo === "http://placehold.it/350x150";             }           }         },         error: function() {           console.log("it failed");         }       });     });      twitchcheck.showarray = function () {       console.log(twitchcheck.alluserschannelobjects);         }     twitchcheck.onoroff = function(channelname) {             if(twitchcheck.onlineusers.indexof(channelname.name) !== -1) {         return "on";       } else {         return "off";       }     }       }); 

i given list of display_names , of display names not valid channels. believe ajax/angular stuck trying find information of invalid channels, not sure.

since jquery http call outside of angular digest cycle (it asynchronous call), need manually run digest cycle using $scope.$apply() controller in success callback.

see example here: http://codepen.io/anon/pen/oxgqgm

however, suggested mcranston18 on comment, better use angular's $http service rather jquery, takes care of scope digestion , don't need yourself.