Angular Controller organization and ui-router - angularjs

Question

I am trying to make a simple list display, but I am having some concerns about Controllers organization.
In my application, I have 2 states, items and state2. In items, I want to display a list of Items, and "something else" in state2.
But I also have a + button at the top of my application that can add an item to my list. And I want that button to be displayed in both states. Here is an illustration:
Now, I would like to put my items related functions, in a specific controller ItemsCtrl. So this would be my routes:
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/items");
$stateProvider
.state('items', {
url: "/items",
templateUrl: "partials/items.html",
controller: "ItemsCtrl"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html",
controller: "State2Ctrl"
});
});
And this would be my ItemsCtrl:
myApp.controller('ItemsCtrl',function($scope){
$scope.items = ["One",'Two'];
})
And now, I make a new MainCtrl to handle the + button that should be present on any page:
myApp.controller('MainCtrl',function($scope){
$scope.promptItem = function(){
var result = prompt('Add Item', 'New Item', ['ok'], 'Zero');
$scope.items.push(result.input1); //This line doesn't work
}
})
What is the best organization for this kind of interface? Do I really need to put my $scope.items in my MainCtrl?
I'd rather not, and the best thing I think would even be to put the promptItem function in ItemsCtrl, what do you think?
Thanks a lot for your answers, I am completely new to this world :)
EDIT: Here is my HTML structure, my + button is in the root file:
<button ng-click="promptProduct()">Add Item</button>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<div ui-view></div>

Answer 1

This is probably a great place to leverage an Angular service. The problem from what I understand is that you are struggling to share state between different parts of your application. I would recommend creating, e.g. a ListService, as such:
myApp.service('ListService', ListService);
function ListService () {
this.list = ['One', 'Two'];
}
ListService.prototype = {
addItemToList: function (newThing) {
var item = // some initialization of an item from the passed value
this.list.push(item);
}
};
You can then inject ListService anywhere you need access to the data itself. Both the list view and the state2 need it -- the former to actually render the list, and the latter to modify its contents. The method I described above lets you separate the data (the list itself) from the presentation / UI interaction.
[edit]
Likewise, if you want a button that lets you add a new item in both of your views, you could create a directive that receives ListService and prompts the user with a modal when clicked.