Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyDisplayCtrl">
<select ng-model="store.currentItem" ng-options="i.name for i in items">
</select>
</div>
<div ng-controller="MyManageCtrl">
<div ng-repeat="item in items">
{{item.name}}
</div>
<input type="button" ng-click="addItem()" value="add item" />
</div>
JavaScript
var myApp = angular.module('myApp',[]);
/**************************************************/
// //
// fixed by exposing the ItemStore to the //
// display controller and addressing that //
// in the ng-model //
// //
/**************************************************/
function MyManageCtrl($scope, ItemStore) {
$scope.items = ItemStore.items;
$scope.addItem = function(){
// setting the ItemStore's current item. Called on button click.
ItemStore.currentItem = ItemStore.addItem();
}
}
MyManageCtrl.$inject = ['$scope', 'ItemStore']
function MyDisplayCtrl($scope, ItemStore) {
debugger;
$scope.items = ItemStore.items;
$scope.item = ItemStore.currentItem;
$scope.store = 'item 2'
;
// ng-model cannot bind to function on select element?
$scope.getItem = function(){
return(ItemStore.currentItem);
}
}
myApp.factory('ItemStore', function(){
var items = [{name: ' first item '}];
var addItem = function(){
newItem = {name: 'item '+items.length};
items.push(newItem);
return(newItem);
};
var currentItem = items[0];
return({
currentItem: currentItem,
items: items,
addItem: addItem});
});