Onsen ng-repeat and ajax

Question

I've a big problem in my app and I think it's caused by the asynchronous call.

The html part is:

<ons-list ng-repeat="item in newsEventi.items">
   <ons-list-header class="news_titolo_lista">{{item.categoria}}</ons-list-header>
       <ons-list-item class="news_titolo">
        ({{item.titolo}})
       </ons-list-item>           
</ons-list>

The js part (the controller) is:

app.controller('NewsEventiController', ["$scope", function($scope)
{
  //--------------------//
  // private variables
  //--------------------//
  var _self = this;

  var _items = [];

  //--------------------//
  // private functions


  //--------------------//
  // constructor
  (function()
  {

    var url = "http://www.gaelico.net/app/test_json.php";  
    // IT RETURNS -> [{"titolo":"test","categoria":"cat1"},{"titolo":"test1","categoria":"cat2"}]
    $.post(url, {data: JSON.stringify({regID: localStorage.getItem("regID")})},
      function(json)
      {
        _items = JSON.parse(json);
        $scope.$apply();
        console.log("After: " + _items);        
      });    
  })();

  //--------------------//
  // public properties
  //--------------------//

  this.items = _items;
  console.log("Before: " + this.items);

  //************************************************************************//
  // public methods
  //************************************************************************//

}]);

My problem is that the list never display the 2 elements. I used $scope.$apply() because I thought it was the right method to update the list, but it seems not to work.

Thank you in advance for every suggestion.

---

EDIT I tried to change the script as suggested, and now the code is

app.controller('NewsEventiController', ["$scope","$http", function($scope,$http)
{
  //--------------------//
  // private variables
  //--------------------//
  var _self = this;

  $scope._items = [];

  //--------------------//
  // constructor
  (function()
  {
      // the url returns: [{"titolo":"test","categoria":"cat1"},{"titolo":"test1","categoria":"cat2"}]
      $http.get("https://www.gaelico.net/app/test_json.php")
        .success(function(response) {
          console.log(response);  
          // it shows in the console, correctly: "Object, object"
          $scope._items = response;      
        });

  })();

  //--------------------//
  // public properties
  //--------------------//

   console.log("Before: " + $scope._items);  // empty


}]);

(and in ng-repeat, I put ng-repeat="item in newsEventi._items") But I still don't see any update in the list.

Answer 1

Declare items like this:

$scope._items = []

Your ngRepeat:

item in _items

You should not need to call apply and i recommend you look into angulars http module instead of using jquery.