AngularJS bugs? - angularjs

Question

I am developing web application with AngularJS v1.2.15, Google Chrome Version 33.0.1750.152, Firefox version 26.0.
Problems that I found:
1.When I choose ng-options in select tags via keyboard, model updates, but to the ng-model writes first value the first two clicks. Using the mouse works fine. This problem found in Google Chrome. In Firefox all works good. Example: plunker
<div class="controls">
<select id="model" ng-model="safe.model.id"
ng-options="model.id as model.name for model in models" required>
</select>
</div>
2.In Google Chrome styles are not working for input elements (bootstrap input style and angular invalid class style). I took some screenshots.
Google Chrome:
Firefox:
Does anyone else have these issues? Or maybe I'm doing something wrong.

Answer 1

For issue #1, I think its a bug. It's been reported here: https://github.com/angular/angular.js/issues/4836
There seems to be an alternative though - if you specify an option with a null value, then it fixes it.
So, you can just add <option value="">Select one</option> and it works.
Here's a modified plunkr that shows it.
Can you post code for second issue so that we can figure out what is wrong with it? Just images are not helping.

Answer 2

As far as I know - there aren't any (keyboard) issues with ng-options or the select element with angular which probably means that it just isn't doing what you expect it to do. I have created a fiddle loosely based on the code you provided. The following is my controller:
app.controller('Test', function ($scope) {
$scope.models = [{id: 0, name: 'abc'}, {id: 1, name: 'def'}, {id: 2, name: 'ghi'}, {id: 3, name: 'jkl'}];
// safe has to be defined
$scope.safe = {model: $scope.models[2]};
});
For the select element, I started with what you had but simplified it a little bit:
<select id="model" ng-model="safe.model"
ng-options="model.name for model in models"
required=""></select>
If you take a look at plunker, it is working here. Note that I wrote and tested this in Chrome Version 33.0.1750.154 m. I added a focus button so you can test keyboard input (it is hard to focus on the select otherwise).
As to the styling - by default the select box in chrome does look different but I can't tell from your screen shots what you consider to be the exact issue here. Hopefully this at least helps with part of your concerns.

Answer 3

I created videos that show issue №1.
Google Chrome example, Firefox example

Answer 4

I anwsered this question at other post, but basically as others said, you can:
1) Add a empty option
2) Force to select a member of the list.
Bellow I have the two solutions and the problem at jsfiddle too.
Select options through ng-click is not working in chrome browser using AngularJS
For me this error is a bug on Chrome, not angular, because in firefox worked(when it loses the focus updates the model).
:)