title: Updating $scope without ng-click and sorting the array dynamically
body: <p>I'm trying to update the view dynamically when a new record is added via websockets. The newest record (it'll have the highest ID by default) should be at the bottom, but it gets added randomly. I couldn't find why it happens.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('Persistence').controller("PersistenceController", [
    "$scope",
    "$http",
    "$filter",
    "$timeout",
    "$mdDialog",
    "$sce",
    function ($scope, $http, $filter, $timeout, $mdDialog, $sce) {
      $scope.records = [];
      $scope.sortById = 'id';
      var socket2 = io.connect('192.168.1.100:3001');
  
      socket2.on('newInformation', function (data) {
        $scope.records.push({
          title: data.data.title,
          id : data.data.id,
          name: data.data.name
        });
  
        $scope.$apply();
  
      });    
    }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;body ng-app="Persistence" ng-controller="PersistenceController"&gt;
    &lt;div ng-repeat="record in records | orderBy : sortById"&gt;
      &lt;div&gt;{{record.id}}&lt;/div&gt;
      &lt;div&gt;{{record.title}}&lt;/div&gt;
      &lt;div&gt;{{record.name}}&lt;/div&gt;        
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>