title: AngularJs asynchronous data binding
body: <p>I'm very new to AngularJs and I have simple question. I want to put the name. But this name has one value at first but after 0.3-0.5 sec it have other value. I don't know how to bind it, that the value could change.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div ng-controller="FormController"&gt;
      &lt;h2 &gt;
          {{getName()}}&lt;br&gt;
          &lt;span class="icon-f-gear"&gt;&lt;/span&gt;
          &lt;small&gt;Procesas&lt;/small&gt;
      &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular controller:</p>
  
  <pre><code>var App = angular.module('form', ['ui.bootstrap']);
  
  App.controller('FormController', ['$scope' ,'$http', function($scope, $http) {
  
      $scope.tasks = [];
      $scope.socket.stomp.subscribe("/app/tasks", function (message) {
          if ($scope.tasks.length !=0){
              $scope.tasks.removeAll();
          }
          JSON.parse(message.body).forEach(function (el) {
              $scope.tasks.push(el);
          });
      });
      $scope.getName = function(){
          return $scope.tasks[0].form.name;
      };
  </code></pre>
  
  <p>I'm using Stomp protocol, it gives me data not instantly, because it has to send request to server and get it back, it takes time. I tried to debug after the request variable $scope.tasks[0].form.name changes from undefined to "Institution", but in the screen undefined stays, how to bind variable to change the value dinamically. Thanks for help in advance!</p>
  
  <p><strong>UPDATE</strong>
  Problem solved, I just had to use $scope.apply(...) function. Code here:</p>
  
  <pre><code>var App = angular.module('form', ['ui.bootstrap']);
  
  App.controller('FormController', ['$scope' ,'$http', function($scope, $http) {
  
      $scope.tasks = [];
      $scope.socket.stomp.subscribe("/app/tasks", function (message) {
          if ($scope.tasks.length !=0){
              $scope.tasks.removeAll();
          }
          JSON.parse(message.body).forEach(function (el) {
              $scope.tasks.push(el);
          });
          $scope.apply(function(){$scope.tasks});
      });
      $scope.getName = function(){
          return $scope.tasks[0].form.name;
      };
  </code></pre>
  
  <p>Thanks for help!</p>