<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="font-awesome@*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Angular Scopes are Hard</h1>
<div class="row">
<div class="col-sm-6" ng-controller="BadController">
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
Not using an object = <i class="fa fa-frown-o"></i>
<small class="pull-right"><span class="label label-default">BadController</span></small>
</h4>
</div>
<div class="panel-body">
<div ng-if="true" class="panel panel-info">
<div class="panel-body">
What's the most patriotic color?
<select ng-model="myModel" ng-options="color for color in models" style="width: auto; display: inline;" class="form-control input-sm">
<option value="">Pick a color</option>
</select>
<div style="margin-top: 1em;">Color <mark>inside</mark> isolated scope: <code>{{myModel|json}}</code></div>
</div>
<div class="panel-footer">
<p class="small text-right" style="margin: 0;"><i class="fa fa-info-circle"></i> The <code>ng-if</code> directive created an isolated scope.</p>
</div>
</div>
This box is not in an isolate scope.
<select ng-model="myModel" ng-options="color for color in models" style="width: auto; display: inline;" class="form-control input-sm">
<option value="">Pick a color</option>
</select>
<div style="margin-top: 1em;">Color <mark>outside</mark> isolated scope: <code>{{myModel|json}}</code></div>
</div>
<div class="panel-footer">
Updates from outside won't appear inside after a color is chosen inside.
</div>
</div>
</div>
<div class="col-sm-6" ng-controller="GoodController">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
Using an object = <i class="fa fa-smile-o"></i>
<small class="pull-right"><span class="label label-default">GoodController</span></small>
</h4>
</div>
<div class="panel-body">
<div ng-if="true" class="panel panel-info">
<div class="panel-body">
What's the most patriotic color?
<select ng-model="uiState.myModel" ng-options="color for color in uiState.models" style="width: auto; display: inline;" class="form-control input-sm">
<option value="">Pick a color</option>
</select>
<div style="margin-top: 1em;">Color <mark>inside</mark> isolated scope: <code>{{uiState.myModel|json}}</code></div>
</div>
<div class="panel-footer">
<p class="small text-right" style="margin: 0;"><i class="fa fa-info-circle"></i> The <code>ng-if</code> directive created an isolated scope.</p>
</div>
</div>
This box is not in an isolate scope.
<select ng-model="uiState.myModel" ng-options="color for color in uiState.models" style="width: auto; display: inline;" class="form-control input-sm">
<option value="">Pick a color</option>
</select>
<div style="margin-top: 1em;">Color <mark>outside</mark> isolated scope: <code>{{uiState.myModel|json}}</code></div>
</div>
<div class="panel-footer">
Updates from outside will appear inside even after a color is chosen inside.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module("myApp", [])
.controller("BadController", function($scope){
// This variable starts as a scalar value. Danger! Danger!
$scope.myModel = null;
$scope.models = ["red", "white", "blue"];
})
.controller("GoodController", function($scope){
// This object will be accessible in all isolate scope underneath this scope.
$scope.uiState = {};
// This variable is inside a non-scalar variable. All is good.
$scope.uiState.myModel = null;
$scope.uiState.models = ["red", "white", "blue"];
});