why class="form-control" makes conflicts with protractor

I have resolved this, but I would like to know why I had to do what I did. I will splain myself:

This is my code, so easy, a login form:

<div class="col-sm-8">
     <div class="form-group">
          <input type="text" class="form-control" name="username" placeholder="{{'layout.username' | translate}}" ng-model="credentials.username">
     </div>
     <div class="form-group">
          <input type="password" class="form-control" name="password" placeholder="{{'layout.password' | translate}}" ng-model="credentials.password">
     </div>
</div>

Now in protractor I will try to put some text in both inputs:

importedModule.putValueInElement(importedModule.passLogin,"editor");
importedModule.putValueInElement(importedModule.userNameLogin,"editor");
importedModule.clickWithDelay(importedModule.buttonSingIn);

where:

var userNameLogin = element(by.model('credentials.username'));
var passLogin = element(by.model('credentials.password'));
var buttonSingIn = element(by.id('buttonSingIn'));

After I execute it, i get this common error:

Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see http://ift.tt/OLBPn9

After testing different ways to fix it, I figured out that if I remove 'form-control' class, the problem is gone. But why?