angularjs - Questions relative to $scope & controllers -

i'm trying play 2 controllers speaking each other i'm stuck 2 problems/questions:

1. $scope.display not displayed @ first in view. wonder why.
2. $scope.display seems shared between 2 controllers whereas read $scope(s) isolated. wonder why.
3. i read on stackoverflow best communicate between controllers use $rootscope.broadcast & $rootscope.on. apply example?

js

angular.module("superapp", [])     .controller("headerctrl", function ($scope) {         $scope.display = 'hello';     })     .controller("homectrl", function ($scope) {      }); 

html

<div ng-app="superapp">     <div ng-ctrl="headerctrl">         <p>{{ display }}</p>         <div class="bar hello" ng-show="display == 'hello'">              <span>hello world<span>             <button ng-click="display = 'bye'">say bye</button>         </div>         <div class="bar bye" ng-show="display == 'bye'">             <span>bye bye</span>             <button ng-click="display = 'hello'">say hello</button>         </div>     </div>     <div ng-ctrl="homectrl" class="content">         <button ng-click="display = 'bye'">say bye</button>         <button ng-click="display = 'hello'">say hello</button>     </div> </div> 

i think i'm missing something... here's jsfiddle test.

you want use ng-controller , not ng-ctrl.

<div ng-controller="headerctrl"> 

and

<div ng-controller="homectrl" class="content"> 

why code "working"?

when using these directives without declared controller , associated scope:

ng-click="display = 'bye'" ng-show="display == 'hello'" 

you affect $rootscope variables , set new var 'display' in $rootscope value each click. that's why shown after first click , not appear when view page. none of controllers being used.

see: angularjs documentation $rootscope