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

Question

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 c

Answer 1

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

Answer 2

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/