title: AngularJs two way data binding doesn't work when add SignalR lib
body: <p>My problem started when I tried to add a library SignalR in my AngularJs project. I do not know why but the data flow has stopped working properly, I mean that when I try to insert an object into an array I do not see it, but when I try to add another one I see first object, and when I try to add a third object I see only the second.</p>
  
  <p>edit : all code in the angular controller.</p>
  
  <pre><code>app.controller('HomeCtrl', ['$scope', 'HttpSrv', '$state', function ($scope, HttpSrv, $state) {
  $scope.messages = [];
  
  activate();
  
  function activate() {
      if (HttpSrv.CheckToken()) {
          loadPage();
      }
  };
  
  $scope.$on("$destroy", function () {
      con.stop();
  });
  
  function connectToChat() {
  
      HttpSrv.http('GET', 'home/GetChatToken').then(function (res) {
          localStorage.setItem('ChatToken', res.Result);
          con.start({ jsonp: true }, function () { console.log('Start'); });
      });
  }
  
  
  
  var con = $.hubConnection("http://localhost:4704/");
  var hub = con.createHubProxy('ChatHub');
  
  hub.on('fail', function (res) {
      console.error(res);
  });
  
  hub.on('addMessage', addMessage);
  
  $scope.trySend = function () {
      hub.invoke('SendMessage', localStorage.getItem('ChatToken'), document.getElementById('messageBox').value);
  };
  
  function addMessage(name, message, elementId) {
      var tempMessage = '&lt;li id="' + elementId + '" class="right clearfix"&gt;&lt;div class="chat-body clearfix"&gt;'
      tempMessage += '&lt;div class="header"&gt;&lt;strong class="pull-left primary-font"&gt;' + name + ':  &lt;/strong&gt; &lt;br /&gt;'
      tempMessage += '&lt;/div&gt;&lt;p&gt;' + message + '&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;'
  
      document.getElementById('chatBody').innerHTML += tempMessage;
      document.getElementById('messageBox').value = '';
      document.getElementById(elementId).scrollIntoView();
      document.getElementById('chatBody').focus();
  }
  
  function loadPage() {
      HttpSrv.http('GET', 'home/get').then(function (res) {
          //console.log(res);
          if (res.Status == 200 &amp;&amp; res.Succeeded) {
              connectToChat();
              for (var i = 0; i &lt; res.ListResult.length; i++) {
                  res.ListResult[i].CreateDate = res.ListResult[i].CreateDate.replace('T', ' ').slice(0, 19);
              }
              $scope.newsList = res.ListResult;
  
          }
      });
  };}]);
  </code></pre>
  
  <p>(i use document.getElementById because of the problem)</p>