title: AngularJS - unable to recieve data from server during ng-repeat iteration
body: <p>I'm building an app which receives a simple array with youtube video links, along with some other data. I'm constructing several <code>html</code> DOM elements using <code>ng-repeat</code>. Upon every iteration of the repeater I need to call a function and pass the current youtube link. That function call passes the link to the backend for further process and eventually returns an object in the following format:</p>
  
  <pre><code>var obj = {
      duration: "1H34M45S",
    more_data:{
      title: "some title",
      height: "200px",
      width: "100px",
      date_posted: "oct 2, 1734"
    }
  }
  </code></pre>
  
  <p>Obviously my current implementation does not work (infinite loop). Whats the correct way of receiving and using the data during <code>ng-repeat</code> iteration?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row" ng-repeat="vid in videosArray"&gt;
    &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
      &lt;iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;p&gt;{{getVideoInfo(vid.url)}}&lt;/p&gt; &lt;!--here I need to acces the returned object and use the data. for example place the title / duration here --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.getVideoInfo = function(videoUrl) {
    $http({
      url: "youtubeInfo.php",
      method: "POST",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: $.param({getInfo: videoUrl})
    }).success(function(data, status, headers, config) {
      console.log(data);
      return data; //data is an object
    }).error(function(data, status, headers, config) {});
  }
  </code></pre>
  
  <p><code>edit</code>:
  These are the errors i get in the console:</p>
  
  <pre><code>&lt;b&gt;Notice&lt;/b&gt;:  Undefined offset: 1 in &lt;b&gt;C:\xampp\htdocs\controllers\youtubeInfo.php&lt;/b&gt; on line &lt;b&gt;22&lt;/b&gt;&lt;br /&gt;
  {"duration":{"kind":"youtube#videoListResponse","etag":"\"q5k97EMVGxODeKcDgp8gnMu79wM\/Rk41fm-2TD0VG1yv0-bkUvcBi9s\"","pageInfo":{"totalResults":0,"resultsPerPage":0},"items":[]},"vid_data":null}
  </code></pre>
  
  <p><a href="https://docs.angularjs.org/error/$rootScope/infdig?p0=10&amp;p1=%5B%5D" rel="nofollow">https://docs.angularjs.org/error/$rootScope/infdig?p0=10&amp;p1=%5B%5D</a></p>
  
  <p><code>edit2</code> - even if I change the JS function to return the data via <code>$scope</code>, I still get the error above in an infinite loop.</p>
  
  <pre><code>}).success(function(data, status, headers, config) {
      console.log(data);
      $scope.test = data;
  }).error(function(data, status, headers, config) { });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-lg-12"&gt;
    &lt;iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;p&gt;{{getVideoInfo(vid.url)}}&lt;/p&gt;&lt;span&gt;{{test.duration}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>