title: AngularJS: ng-repeat with dynamic data
body: <p>I'm building a simple AngularJS app, but I couldn't solve a problem regarding services, ng-repeat and dynamically added data.</p>
  
  <p><strong>What I'm trying to do</strong></p>
  
  <p>My page is splitted into few countrollers. 
  In the <code>homeController</code> I have a text field and a button. When I press the button I'm doing an API call to the server, the server returns JSON and I'm setting the data to <code>Storage</code> service. In this part everything is OK - The server returns data as it should and the data is setted to the service and I'm getting <code>console.log('Data set!');</code> in the Storage service. In the second controller ( <code>slidesController</code> ) I'm having a <code>ng-repeat</code></p>
  
  <pre><code>&lt;div ng-controller="slidesCtrl"&gt;
      &lt;div ng-repeat="current in paragraphs"&gt; test &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And as you can see in my code below, <code>paragraphs</code> is binded to <code>Storage.data</code> value in <code>slidesCtrl</code></p>
  
  <p>So, when a user enter something in the box and press the button (homeCtrl), the server should pass the returned data to <code>Storage</code> service and render the data using ng-repeat (slideCtrl). If I hardcode the data in Storage server with [2, 3, 4, 5] for example, everything is ok ( I'm getting test 4 times, because of ng-repeat ), but if the data is taken with api call, ng-repeat isn't working.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>App.controller('homeCtrl', function ($scope, $http, Api) {...
  
      $scope.onprocess = function () {
          $scope.loading = true;
  
          Api(.....);
      }
  });
  
  App.controller('slidesCtrl', function ($scope, Storage) {
  
  
      $scope.paragraphs = Storage.data.paragraphs; // NOT WORKING IF DATA IS DYNAMICALLY ADDED
  
      $scope.paragraphs = Storage.test; // IF DATA IS PREDEFINED EVERYTHING IS FINE
  
  
  });
  
  App.factory('Api', function ($http, Storage) {
      return function (data) {
          $http.post('/api', {
              url: data.url,
              analyze: 0
          }).success(function (res) {....
              Storage.set(res);....
          }).error(function () {....
          });
      };
  });
  
  App.factory('Storage', function () {
      var output = {};
  
      var set = function (data) {
          output = data;
          console.log('Data set!');
      };
  
      return {
          set: set,
          data: output,
          test: [1, 2, 3]
      };
  });
  </code></pre>