pinne/app.js

## app.js
'use strict';

angular.module('myApp', ['myApp.second'])
.controller('appCtrl', ['$scope', 'cfg', function ($scope, cfg) {
        $scope.value = cfg["KEY"];
        $scope.show  = cfg.enabled;
        $scope.setting = '';
    }
]);

## index.html
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sharing state</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="second.js"></script>
    <script type="text/javascript" src="shared.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body ng-app="myApp">
    <div class="col-sm-7 col-cs-12">
      <div class="box">
        <div class="inner" ng-controller="appCtrl as ctrl">
          <h1>Boo boo</h1>
          <pre>cfg.KEY = {{value}}</pre>
          <div ng-show="!show" style="border: solid 1px red">
            This div is shown when cfg.enabled is false.
          </div>
          <div ng-show="show" style="border: solid 1px green">
            This div is shown when cfg.enabled is true.
          </div>
          <form>
            <input
              type="radio"
              ng-model="setting"
              ng-disabled="!show"
              value="a">
                Option 1
            <input
              type="radio"
              ng-model="setting"
              ng-disabled="!show"
              value="b">
                Option 2
          </form>
          <div>
            <pre>$scope.value   = {{value}}</pre>
            <pre>$scope.show    = {{show}}</pre>
            <pre>$scope.setting = {{setting}}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-5 col-xs-12">
      <div class="box">
        <div class="inner" ng-controller="secondCtrl as two">
          <h1>Second controller</h1>
          <p>secondCtrl, located in js/second.js</p>
          <pre>$scope.value   = {{cfg.KEY}}</pre>
          <pre>$scope.show    = {{cfg.enabled}}</pre>
        </div>
      </div>
      <div class="box">
        <div class="inner">
          <h1>Hohohoho</h1>
          <p>
            <a href="#">
              a link to another site
            </a>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

## second.js
'use strict';

angular.module('myApp.second', [])
.controller('secondCtrl', ['$scope', 'cfg', function ($scope, cfg) {
        $scope.cfg = cfg;
    }
])

## shared.js
'use strict';

angular.module('myApp')
.constant('cfg', {
    "KEY": "foobar",
    enabled: true
});

## style.css
.box {
  margin: 10px;
}

.box .inner {
  background: #f1f1f1;
  padding: 10px;
  border-radius: 4px;
}

.box h1 {
  margin-top: 10px;
}

.box p {
  margin-left: 4px;
}
	'use strict';

	angular.module('myApp', ['myApp.second'])
	.controller('appCtrl', ['$scope', 'cfg', function ($scope, cfg) {
	$scope.value = cfg["KEY"];
	$scope.show = cfg.enabled;
	$scope.setting = '';
	}
	]);
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sharing state</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
	<script type="text/javascript" src="second.js"></script>
	<script type="text/javascript" src="shared.js"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" />
	</head>
	<body ng-app="myApp">
	<div class="col-sm-7 col-cs-12">
	<div class="box">
	<div class="inner" ng-controller="appCtrl as ctrl">
	<h1>Boo boo</h1>
	<pre>cfg.KEY = {{value}}</pre>
	<div ng-show="!show" style="border: solid 1px red">
	This div is shown when cfg.enabled is false.
	</div>
	<div ng-show="show" style="border: solid 1px green">
	This div is shown when cfg.enabled is true.
	</div>
	<form>
	<input
	type="radio"
	ng-model="setting"
	ng-disabled="!show"
	value="a">
	Option 1
	<input
	type="radio"
	ng-model="setting"
	ng-disabled="!show"
	value="b">
	Option 2
	</form>
	<div>
	<pre>$scope.value = {{value}}</pre>
	<pre>$scope.show = {{show}}</pre>
	<pre>$scope.setting = {{setting}}</pre>
	</div>
	</div>
	</div>
	</div>

	<div class="col-sm-5 col-xs-12">
	<div class="box">
	<div class="inner" ng-controller="secondCtrl as two">
	<h1>Second controller</h1>
	<p>secondCtrl, located in js/second.js</p>
	<pre>$scope.value = {{cfg.KEY}}</pre>
	<pre>$scope.show = {{cfg.enabled}}</pre>
	</div>
	</div>
	<div class="box">
	<div class="inner">
	<h1>Hohohoho</h1>
	<p>
	<a href="#">
	a link to another site
	</a>
	</p>
	</div>
	</div>
	</div>
	</body>
	</html>
	'use strict';

	angular.module('myApp.second', [])
	.controller('secondCtrl', ['$scope', 'cfg', function ($scope, cfg) {
	$scope.cfg = cfg;
	}
	])
	'use strict';

	angular.module('myApp')
	.constant('cfg', {
	"KEY": "foobar",
	enabled: true
	});
	.box {
	margin: 10px;
	}

	.box .inner {
	background: #f1f1f1;
	padding: 10px;
	border-radius: 4px;
	}

	.box h1 {
	margin-top: 10px;
	}

	.box p {
	margin-left: 4px;
	}