title: AngularJS - using a form and auto-completion
body: <p>I have the following code in a partial page used for login...</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin"&gt;
          &lt;h2 class="form-signin-heading"&gt;Login page&lt;/h2&gt;
          &lt;label for="email"&gt; &lt;b&gt;User e-mail&lt;/b&gt; &lt;/label&gt;
          &lt;input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address"&gt;
          &lt;label for="pass"&gt; &lt;b&gt;Password&lt;/b&gt; &lt;/label&gt;
          &lt;input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password"&gt;
          &lt;button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit"&gt;Log in&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...which is ng-included from my one and only main page (index.html):</p>
  
  <pre><code>&lt;body data-ng-controller="controllerLogin"&gt;
      &lt;div data-ng-include="getMainpageBasedOnLoginStatus()"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>...with the <strong>getMainpageBasedOnLoginStatus()</strong> function returning the appropriate path to either the <em>partials/loginPage.html</em> shown above or the <em>partials/mainApplicationPage.html</em> (my main app entrypoint). The <strong>checkCredentials()</strong> call done via ng-submit performs a webservice call to get back login success/failure, and does the proper update in a global model variable - so that subsequent calls to <strong>getMainpageBasedOnLoginStatus()</strong> return the 'ok-you-are-logged-in' page (<em>partials/mainApplicationPage.html</em>). </p>
  
  <p>This login scheme cannot be hacked, because even if the client code is somehow changed to direct to the <em>main app</em> partial instead of the <em>login</em> partial, the server side will simply not function properly (web service requests simply won't function and return 406 errors).</p>
  
  <p>All is well - it works. Except for... autofill. </p>
  
  <p>The login/password fields are neither autocompleted, nor autofilled with Chrome 29. Same in Firefox 23: the login/password fields are not autofilled, but the login one (only the login one, not the password one!) is autocompleted - but not auto-filled.</p>
  
  <p>Note that I have used the HTML5 attribute 'autocomplete' in both the form and the two inputs - with no result whatsoever.</p>
  
  <p>Googling has revealed others who face related issues ( <a href="https://stackoverflow.com/questions/18586938/remember-password-with-angularjs-and-ng-submit">Remember Password with AngularJS and ng-submit</a> ) , with no answer...  I could not upvote that question (I am too green yet, SO-wise).</p>
  
  <p>There is also an open ticket on AngularJS ( <a href="https://github.com/angular/angular.js/issues/1460" rel="nofollow noreferrer">https://github.com/angular/angular.js/issues/1460</a> ) that is there for 7 months, and tells the rather sad tale of people where autofill <em>was actually "working", browser-wise,</em> for some people, except that the underlying model was not updated... and a comment there from someone called "bigbag" that the feature is now disabled, for that reason.</p>
  
  <p>I find this rather unacceptable from the point of view of AngularJS - surely I am not the first one that needs autofill/autocomplete in his app's forms, am I? Or do I have to abandon the Single Page theory and revert back to the nasty form <em>action</em> and separate server-side provided login.html/main.html responses to get autofill/autocomplete working?</p>
  
  <p>Any help/advice most appreciated and desperately needed...</p>