title: Selenium 2.0 changes behavior of AngularJS app
body: <p>I develop a web app which is written in AngularJS. I am testing it with Selenium 2.0 and Chrome and I came across a very strange thing. I have a following feature in my app: there is a list element as follows:</p>
  
  <pre><code>&lt;li ng-repeat="object in filteredObjectsList"/&gt; 
  </code></pre>
  
  <p>The idea is that whenever filteredObjectsList changes, the list element is updated automatically by AngularJS. Now when a user clicks on a special button, an action is performed which results in saving a new row representing an object in the server's database. Now there is a function which is invoked every ten seconds which fetches list of objects from the server and updates the filteredObjectsList variable. This works fine when I launch the app and test it manually, but when I run a Selenium test which mimics the same behavior (clicking on the button which should result in modification of the filteredObjectsList in at most ten seconds) nothing happens. I can see that the new object is saved in the database, the client app fetches the data, updates the filteredObjectsList, but list element is not updated. Have you ever encounter something similiar?</p>
  
  <p>The code (or at least fragments) looks like this:</p>
  
  <p>HTML page</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li ng-repeat="object in filteredObjectstList"&gt;
          &lt;div ng-click="doSomething(object)"&gt;
              &lt;div&gt;
                  &lt;img src="images/img.png"&gt; &lt;i ng-if="object.property" class="some-class"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript. $scope.getObjects is the function which is invoked every ten seconds.</p>
  
  <pre><code>$scope.getObjects = function() {
      var method = "GET";
      var url = "/getObjects/";
      var tableData = '';
      var params = {
          provider : "provider"
      };
  
      var success = function(response) {
          if ($scope.objects == undefined) {
              $scope.objects = response.data
          } else {
              var tempObjects = response.data;
  
              /*
                  I could simply replace scope.objects without if-else
                  but this way i prevent flickering of the list in the browser
                  in case when number of objects does not change
              */
              if ($scope.objects.length != tempObjects.length) {
                  $scope.objects = tempObjects;
              } else {
                  for (var i = 0; i &lt; tempObjects.length; i++) {
                      $scope.objects[i].property = tempObjects[i].property
                  }
              }
          }
  
          $scope.filterObjects();
      }
  
      app.requestNoLoader(method, url, tableData, success, params)
  }
  
  $scope.filterObjects = function() {
      var filterInput = document.getElementById("inputfilter");
  
      if(filterInput!=undefined){
          var filterText = document.getElementById("inputfilter").value.toLowerCase();
  
          if (filterText == "") {
              $scope.filteredObjectsList = $scope.objects;
          } else {
              $scope.filteredObjectsList = $scope.objects.filter(function(object) {
                  return $scope.filterObject(object, filterText);
              });
          }
      }
  }
  </code></pre>