Using AngularJS, how do I bind a <select> element to an attribute that updates via a service

Question

Using AngularJS, how do I bind a <select> element to an attribute that updates via a service

I have a display controller and a management controller. Inside my display controller, I have a dropdown selector with the list of items that have been selected.

I can get the display area dropdown to update the list, adding items as they are added in the management controller, but I cannot figure out how to select the newest item in the dropdown.

<div ng-controller="MyDisplayCtrl">
  <select ng-model="item" ng-options="i.name for i in items">
  </select>
</div>

I have made a jsfiddle to illustrate my situation. Ultimately, though, my question is how to bind that ng-model="item" to a data source updated by a service.

http://jsfiddle.net/whtevn/mUhPW/2/

javascript
angularjs

Answer 1

Well, it looks like I've found a pretty satisfactory answer to this.

I exposed the storage object itself through the controller

function MyDisplayCtrl($scope, ItemStore) {
    $scope.items = ItemStore.items;
    $scope.item  = ItemStore.currentItem;

    // expose the itemstore service to the dom
    $scope.store = ItemStore

    $scope.getItem = function(){
        return(ItemStore.currentItem);
    }
}

and then address the currentItem directly

<div ng-controller="MyDisplayCtrl">
    <select ng-model="store.currentItem" ng-options="i.name for i in items">
    </select>
</div>

http://jsfiddle.net/whtevn/Cp2RJ/3/

Answer 2

Try using ng-options:

<div ng-controller="MyDisplayCtrl">
    <select ng-options="i.name for i in items"></select>
</div>

See: http://docs.angularjs.org/api/ng.directive:select