How to update model asynchronously?

Question

This code is invoking multiple get requests and updating model from result of each get request.

http.get is asynchronous, does this extend to when the UI model is updated ?that if the get request returns data out of order (the 3'rd get request returns data before the 1'st request) then the third value for statusViewer directive will be updated first on UI ? If not how can modify to update UI model when data is returned from get request ?

plnkr : https://plnkr.co/edit/BjETLN7rvQ1hNRIm51zG?p=preview

plnkr src :

http-hello1.html:
{ "content" : "divContent" , "id" : "r1" }

http-hello2.html:
2. http-hello2.html

http-hello3.html:
3. http-hello3.html

index.html : 
<!doctype html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

  <div ng-controller="FetchCtrl">

  <status-viewer ng-repeat="sourceUrl in sourceUrls" url="sourceUrl"></status-viewer>
</div>


  </body>
</html>

mytemplate.html:
<!--<h1>{{url}}</h1>-->
<div>
    <p>{{model}}</p>
</div>

script.js : 

var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl)

myapp.directive('statusViewer', function ($http) {
            return { 
                restrict: 'E',
                templateUrl: 'mytemplate.html', 
                scope: {
                    url: '='
                },  
                link: function (scope, elem, attrs, ctrl) {
                    $http.get(scope.url).success(function (data) {
                        scope.model = JSON.stringify(data);
                    });
                }
            };
        });

function FetchCtrl($scope, $http, $q , $parse) {


$scope.sourceUrls = [
                'http-hello1.html',
                'http-hello2.html',
                'http-hello3.html'
            ];



}

Update : The expected behavior is that the UI model will be updated in same order as 'success' callback is invoked, is my expected behavior assertion valid ?

Yes, the response to the second request can come before the response to the first one, and the second status can thus appear on the screen before the first one. Is that the question you had? Why are you using angular 1.0.6? The current stable version is 1.4.9. 1.0.6 is almost 3 years old. — JB Nizet, Jan 23 '16 at 17:36
You can't control order that requests are received but you can manage processing them in order. This question is a lot like one of [your previous ones](http://stackoverflow.com/questions/34953005/how-to-bind-content-to-individual-div-with-promise) in that it is way too broad and doesn't indicate what behaviors you are looking for or what specific issues you are having — charlietfl, Jan 23 '16 at 17:38
@alfcho using promises if one request fails then they all fail ? — blue-sky, Jan 23 '16 at 17:40
@JBNizet yes, this is the question I had - will the UI model be updated in same order as 'success' callback is invoked. I've updated to use Angular 1.4.9, thanks. https://plnkr.co/edit/BjETLN7rvQ1hNRIm51zG?p=preview — blue-sky, Jan 23 '16 at 17:44
@blue-sky yes, the $q.all promise gets rejected if one fails: http://stackoverflow.com/questions/19944922/what-happens-with-q-all-when-some-calls-work-and-others-fail — alfcho, Jan 23 '16 at 17:45
@alfcho thanks, this is not the behavior I want, if one get request fails should not influence return value of other get requests. — blue-sky, Jan 23 '16 at 17:48
@blue-sky you can also try to chain promises together `$http.get(firstUrl).then(function(firstData){return $http.get(secondUrl)}).then(function(secondData){ return $http.get(thirdUrl)}).then(function(thirdData){ // do work });` — alfcho, Jan 23 '16 at 17:49
@blue-sky goes back to my point above. You haven't outlined a proper problem description or *"expected behaviors"* in the question — charlietfl, Jan 23 '16 at 17:49
@charlietfl: yup, its not clear on what is you expectation.. sounds like priority is not what you are looking... — Thalaivar, Jan 23 '16 at 17:51

How to update model asynchronously?

0 Answers0