How to pass the value selected from dropdown in contextscope in Angularjs?

Question

I have a dropdown

$scope.animals = [
      {value:'lion', name:'lion', description: 'lion'}, 
      {value:'cat', name:'cat', description: 'cat'}, 
      {value:'dog', name:'dog', description: 'dog'}, 
    ];

and I want to pass the value selected from dropdown as contextscope to another directive. eg

<md-select ng-model="context">
    <md-option ng-repeat="animal in animals" value="{{animal.value}}"  aria-label="{{animal.name}}">{{animal.name}}</md-option>
</md-select>
<div described-type flex="70" contextscope="context"></div>

In described-type directive I am adding description

<input ng-model="context.description" name="context.description">

I am getting the following error: " Cannot create property 'description' on string 'lion' "

The format of JSON I want is

"lion" : {
           "description": "wild animal"
         }

How can I resolve the error and create a JSON?

Answer 1

You're setting value incorrectly. ngModel is set with value, which you set as animal.value , which is the string lion in this case. Instead, it should be:

<md-select ng-model="context">
    <md-option ng-repeat="animal in animals" value="{{animal}}"  aria-label="{{animal.name}}">{{animal.name}}</md-option>
</md-select>
<div described-type flex="70" contextscope="context"></div>