title: Angular binding ajax data through array
body: <p>I am trying to load the ajax data into array then bind the array using Angular, here is my code (I am beginner with KO experience so I try to keep it simple to work) </p>
  
  <p><strong>Update</strong>
  I got it working I think the problem was loading the page before loading the Ajax data, (Although I think it is normal to load the page first!!) but here is what happened , I am using Onsen UI , which loads page templates on mobile, so the solution was moving the "SetMainPage" (the function which loads the page/navigation) I moved this function to be called after the data is loaded (ajax >success). And binding now works .</p>
  
  <p>I am not sure it is best practice if you have tips for me would be appreciated </p>
  
  <p>1- In my controller I set the following feed as empty array then I try to fill:</p>
  
  <pre><code>var self= this;
  self.feed = [];.....
  </code></pre>
  
  <p>when loading ajax i set the value for this array</p>
  
  <pre><code>angular.extend(self.feed, data.obj);
              alert(JSON.stringify(self.feed));
  </code></pre>
  
  <p>so the second line give me alert of the data correctly loaded in the object self.feed But this does not reflect on the angular view when calling, there seems to be no items in bd.feed</p>
  
  <pre><code>    &lt;div ng-repeat="act in bd.feed"&gt;
          {{act.activity_id}}
      &lt;/div&gt;
  </code></pre>
  
  <p>where bd is defined as controller in the body Tag as follow</p>
  
  <pre><code>&lt;html lang="en" ng-app="app" ng-csp&gt;
  &lt;body id="body" ng-controller="MyController as bd"&gt;
  </code></pre>
  
  <p>and here is how i initialize the controller</p>
  
  <pre><code>angular.module('app', ['onsen']).controller('MyController', function ($scope,$rootScope) {
  var self = this;
  </code></pre>
  
  <p>and I call the ajax function from the view like:</p>
  
  <pre><code>{{bd.getfeed()}}     
  </code></pre>
  
  <p>Code for getfeed in controller</p>
  
  <pre><code>self.getfeed = function () {
      $.ajax({
          type: 'POST',
          url: "http://www.server.com/api",
          crossDomain: true,
          data: { panel: 'ok' },
          success: function (data) {
              console.log(data);
                  var json_obj = JSON.parse(data);
                  console.log(json_obj);
                  var obj = json_obj.obj;
                  console.log(obj);
  
                  angular.extend(self.feed, json_obj.obj);
                          },
          error: function (data) {  }
      });
  }
  </code></pre>
  
  <p>may be I am missing a lot of things but I just want a way to load the json to object and display correctly..then may be some advices come later about best practices</p>
  
  <p>Thanks for your help</p>