Question: I have an angularjs dropdown directive. I want to be able to pass the id of the item I want to be selected as an attribute of the directive. Something like this:

```
<dropdown selected-item-id="ctrl.selectedItemId"></dropdown>  

```

I implemented this and it's not working. If I display the value of itemId on the directive code, I can see the right value, but the dropdown selection does not update. Here's the relevant code:

```js
(function () {
 'use strict';
 var dropdown = function ($state, service) {
  return {
   restrict: 'E',
   replace: true,
   templateUrl: '/dropdown.html',
   scope: {
       selectedItemId:"="
   },
   link: function (scope, elem, attr) {
              service
                .getItems()
                .then(function (items) {
                    scope.items = items;
                 });
   }
  };
 };
 dropdown.$inject = ['$state', 'service'];
 angular.module('app').directive('dropdown', dropdown);
})();
```

```html
<select class="form-control"
        ng-model="selectedItemId"
        ng-options="item.id as item.name for item in items">
    <option value="" selected disabled>Select an item</option>
</select>
```

Like I said, if I display the selectedItemId on the directive template (e.g. as one of the options) I see the right id value, however the dropdown selection doesn't change.

Any thoughts?

**EDIT:**
I had a typo (happened when typing the code, the actual code on my editor is correct) on the dropdown's property, item-id to selected-item-id

Answer: 
You are not binding selected value to item-id as you think according to your html code. You are binding selected value to selected-item-id.

Try changing your html to this:

```
 <dropdown selected-item-id="ctrl.selectedItemId"></dropdown>

```
I'm not sure why it wasn't working like I had it, but I made some changes an now it works ok. Here's what I did *(the explanation is included as comments on the source code)*:

```js
//Here I use the selectedItem bidirectional binding on the .then of my service call
//to get the id of the items that's supposed to be selected.
//Then, I filter the array of items using that id, so I get the actual object that matches the id.
//Finally, I set the scope object "selectedItem" to that object I just got. 
//The "selectedItem" object is what's bound to the select via ng-model so that does the selection.
(function () {
 'use strict';
 var dropdown = function ($state, service) {
  return {
   restrict: 'E',
   replace: true,
   templateUrl: '/dropdown.html',
   scope: {
       selectedItemId:"="
   },
   link: function (scope, elem, attr) {
              service
                .getItems()
                .then(function (items) {
                    scope.items = items;
                var selectedItem = $filter('filter')(items, { id:     scope.selectedItemId })[0];
            scope.selectedItem = selectedItem;
                 });
   }
  };
 };
 dropdown.$inject = ['$state', 'service'];
 angular.module('app').directive('dropdown', dropdown);
})();
```

```html
<!--Here I replaced the ng-model to use an object rather than an id and did the same on the ng-options -->
<select class="form-control"
        ng-model="selectedItem"
        ng-options="item as item.name for item in items">
    <option value="" selected disabled>Select an item</option>
</select>
```