将选择元素与Angular 1.5绑定

Question

I don't know why when I run my page the options are well rendered but when I do a inspect element in Chrome I can see that the value of my options are not well. It gives me the value="object:8"

<option label="Teacher" value="object:8">Teacher</option>

If I replicate my code in fiddle , it works well. The value for the first option is value="1"

This "select" element is in a modal which is in a template page that is called in a ui-view

This is the html

<select 
       x-ng-model="filteredCategory" 
       x-ng-options="category.name for category in categories" >
    <option value="">-- Choose a category --</option>
</select>

This piece of code from controller

app.controller('CategoriesController', function ($scope, $stateParams, $uibModal, RegistrationService) {

    RegistrationService.getCategories().then(function(categories){
        $scope.categories = categories;
    });
});

I tested the result of my restful web service with postman chrome

[
  {
    "id": 1,
    "name": "Teacher"
  },
  {
    "id": 2,
    "name": "Student"
  },
  {
    "id": 3,
    "name": "Coordinator"
  },
]

What is my mistake?

Answer 1

I found this article that explains why angular is parsing my value as object:#.

I don't know why it doesn't work on my modal in angular but in jsfiddle works well.

Hope this help anyone else.