I can't access the properties of an object even though I can see it's contents

Question

This code used to work just fine when I was using bootstrap's way of dropdown menus.. now that I switched to conventional I dont know why I'm getting this problem. Why can't I access the properties?? Driving me nuts here

HTML

    <select class="form-control" ng-model="client" ng-change="clientSelect(client)">
        <option value="">--- Please Select ---</option>
        <option ng-repeat="client in clientList" value="{{client}}">{{client.clientName}}</option>
    </select>

Angular/Javascript

$scope.clientSelect = function (client) {
  console.log(client);
  console.log(client.clientName);  //is undefined
  console.log(client.clientId);  //is undefined
}

Ouput:

{"clientId":102,"clientName":"Testing"}  //i clearly see the properties here...
UsersController.js:130 undefined
UsersController.js:131 undefined

EDIT: when I console.log($scope.clientList) it's fine.. the object of the first item in the array looks like this:

0: Object $$hashKey: "object:254" clientId: 102 clientName: "Testing" _proto: Object

Answer 1

You can't access properties, because the client you get from ng-repeat is a string.

Check the console log of this Plunker I created with your code. You will see that the first consol.log(client) is actually logs out this string: {"clientId":102,"clientName":"Testing 1"}. Therefore, it doesn't have any properties.

From the select docs:

Note that the value of a select directive used without ngOptions is always a string. When the model needs to be bound to a non-string value, you must either explictly convert it using a directive (see example below) or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present.

Consider using the ngOptions directive instead of <select> with ng-repeat.