Basic behaviour and structure of an angularjs app - angularjs

Question

I am trying to introduce myself into angularjs.
Although i have worked through the tutorial and watched the basic building videos, i am still struggling with the behaviour and architecture of a more-or-less large scale application.
My application has a menubar that includes an add-button. If the user clicks the button, i want a dialog to pop-up. That dialog is not part of the menu:
<!-- The menu -->
<header class="mod modHeader" ng-controller="HeaderCtrl">
<div class="modHeader__addProject" ng-click="openAddDialog()">
<i class="icon-plus icon-2x"></i>
</div>
</header>
<!-- the dialog -->
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl">
<!-- content stripped out -->
</div>
My intention was to create a properties object inside the scope of my HeaderCtrl controller, then change a boolean value on click of the said button.
// HeaderCtrl
function HeaderCtrl($scope){
$scope.properties = {
"AddDialogVisibility": false
};
$scope.openAddDialog = function () {
$scope.properties.AddDialogVisibility = true;
};
}
Now, there are multiple issues and questions:
I have to apply HeaderCtrl to my dialog in order to get access to the properties object. This is nasty to me, HeaderCtrl should control only my header module, shouldn't it?
The dialog won't show up on click. I found out that this is because the property gets checked only once, on page load, and that i would have to use a function. What is a proper way to achieve my goal?
Conclusion:
I would say that i can summarize my question to:
I use a Controller for each section of my page. How do they communicate?

Answer 1

In the sample code you provided, two HeaderCtrls will be created. Each use of ng-controller will create a controller.
To share data in Angular, use a service. Inject that service where needed – into controllers, directives, etc.
When designing an Angular app, try to think in terms of models (which are often contained in services, and those services then expose model APIs to the rest of the application) and views. A controller is just the glue that allows us to project the relevant parts of our models into a view.
Dialogs are a special/unique case, since they don't take up a specific place in the rest of the application. Listen to a few minutes of Misko regarding this subject.
I would also recommend looking at how the Angular-UI team implemented dialogs: http://angular-ui.github.io/bootstrap/#dialog

Answer 2

angular structure
app->
assets->
css -> all css file
js -> all js file
partials-> all html files
vender -> third party file (like angular.js , jquery.js)
router.js
services.js
filter.js
directives.js
controllers.js
index.html