javascript - In AngularJS how to render different items of a list independently -

i new angularjs , not able find answer below problem on internet after spending hours.

please feel free suggest better way of doing, trying below.

see angularjs work in progress code:

<li ng-repeat="result in getresults()" ng-controller="resultcontroller">   <div class="name_style">   {{result.name}}  </div>    <!--fetch more details each result , set $scope.resultdetail-->  <div class="name_detail_style" ng-bind=getdetails(result.name) ng-controller="resultdetailcontroller">   {{resultdetail.image}}   {{resultdetail.description}}  </div>  </li>     

for brevity tried simplify above.

i trying render list of results in 2 parts:

1. getresuls() makes rest service call array of results.

2. then getdetails(result) makes service call more details of particular result.

it running super slow, because angularjs trying render both name , details simultaneously. want name render available , render details whenever getdetail() service call chance response back.

i cannot figure out if/how can use solution how load data asynchronously using angularjs springmvc?

let me know if need see controller side code too.

edit adding example of controller code too. please excuse typos in manually re-creating below code.

function resultcontroller($scope, $http) {     $scope.getresults = function() {          $http({method: 'get', url: resulturl=  timeout: maxtime})             .success(function (data, status, headers, config) {                console.log(data);                $sope.result=data;                  })              .error(function (data, status, headers, config) {                 if (status == 0) {                     servicetimedouterror($scope, data, status, config);                 } else {                     servicefailure($scope, data, status, config);                 }             })     };  };    function resultdetailcontroller($scope, $http) {     $scope.getdetails = function(result) {           resultdetailsurl=resultdetailsur+"/"+result           $http({method: 'get', url: resultdetailsurl=  timeout: maxtime})             .success(function (data, status, headers, config) {                console.log(data);            $sope.resultdetails={"image":data["image"],"description":data["description"]};                  })              .error(function (data, status, headers, config) {                 if (status == 0) {                     servicetimedouterror($scope, data, status, config);                 } else {                     servicefailure($scope, data, status, config);                 }             })     };  }; 

you can't (meaning really shouldn't) reference ajax call wrapper function in template. nevermind isn't "angular way" (templates shouldn't mess data, , ng-repeat calling ajax function), breaks because making ajax call (and 1 more each element in returned array!) each render cycle!

you should able (and want to) control when want information backend/api, , woork until want refresh it/commit changes. so, main thing change:

<li ng-repeat="result in getresults()" ng-controller="resultcontroller">  

to

<li ng-repeat="result in myresults" ng-controller="resultcontroller">  

and resultcontroller to:

function resultcontroller($scope, $http) {     $scope.getresults = function() {          $http({method: 'get', url: resulturl=  timeout: maxtime})             .success(function (data, status, headers, config) {                console.log(data);                $sope.result=data;                  })              .error(function (data, status, headers, config) {                 if (status == 0) {                     servicetimedouterror($scope, data, status, config);                 } else {                     servicefailure($scope, data, status, config);                 }             })     };      $scope.myresults = $scope.getresults();  }; 

what call ajax request once, when controller instantiated.

you same resultdetailcontroller, consider if worth it. should separate calls if main results aren't change whole lot (every time change, requests repeated), or details represent lot of data, , need show structure quickly, , then, details.

also, consider calling element's details when, instance, user "opens it".

edit, response comments below

as said, should separate information (the model, , ajax requests , update it) templating , displaying. said, need decide best:

• you can info upfront, , filter afterwards (filter displayed) or
• you can filtered set of elements backend

in second case, should still controll how ajax calls happen. could, instance, watch filter variables ( using $scope.$watch() ) , call $http service when happens:

(in resultcontroller:)

$scope.$watch("filterstring", function(){   $scope.myresults = $scope.getresults($scope.filterstring); } 

i'd note every time type in filter "searchbox", new request made (which can overkill , lead erroneous results - in case request "beac" returns after request "beach", instance). 1 possible solution implement timeout overrides previous, type (the search kicks in .5 seconds after stop typing)

$scope.$watch("filterstring", function(){   $scope.getresultstimeout.cancel();   $scope.getresultstimeout = $timeout(     function(){       $scope.myresults = $scope.getresults($scope.filterstring);     },     500); }