title: $http request and ng-repeat loop
body: <p>I'm currently playing around with Angularjs and create a simple app to check domain availability. The scenario is: when user entering search query and submit the form, it will request a list of domains in JSON format, then loop the result using ng-repeat and check the availability one by one but it always give me an errors that refer to <a href="https://errors.angularjs.org/1.3.15/" rel="nofollow">https://errors.angularjs.org/1.3.15/</a>$rootScope/infdig?p0=10&amp;p1=%5B%5D</p>
  
  <p>The problem is triggered by <strong>checkAvailability</strong>, trying to figure it my self for hours but still couldn't find the solution. Hope someone here could help me.</p>
  
  <p>Here is my controller:</p>
  
  <pre><code>app.controller('main', ['$scope', '$http',
      function ($scope, $http) {
  
          $scope.searchResults = null;
  
          $scope.search = function () {
              $http.get('/api/domain/search?q=' + this.query).success(function (data) {
                  $scope.searchResults = data;
              });
          };
  
          $scope.checkAvailability = function (domain) {
              // return true;
              $http.get('/api/domain/check?domain=' + domain).success(function (data) {
                  return data;
              });
          };
  
      }
  ]);
  </code></pre>
  
  <p>example API response</p>
  
  <pre><code>#http://localhost/api/domain/search
  
  [
      {
          "domain":"exampledomain1.com",
          "tld":"com"
      },
      {
          "domain":"exampledomain2.com",
          "tld":"com"
      },
      {
          "domain":"exampledomain3.com",
          "tld":"com"
      },
      {
          "domain":"exampledomain4.com",
          "tld":"com"
      }
  ]
  
  #http://localhost/api/domain/check
  
  "available" or "unavailable"
  </code></pre>
  
  <p>and here is my HTML</p>
  
  <pre><code>&lt;div class="container" ng-controller="main"&gt;
      &lt;form class="domain-search form mb40" ng-submit="search()"&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" ng-model="query" class="form-control"&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;input type="submit" class="btn btn-primary" value="Search"&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;ul ng-if="searchResults"&gt;
          &lt;li ng-repeat="item in searchResults"&gt;{{ item.domain }} is {{ checkAvailability(item.domain) }}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you!</p>