<!DOCTYPE html>
<html ng-app='prototypal-inheritance-issue'>
<head>
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Outer">
<h4>Outer Scope</h4>
<label>someValue: "{{someValue}}"</label>
<label>someModel: {{someModel}}</label>
<div class='inner-scope' ng-controller="Inner">
<h4>Inner Scope</h4>
<label>someValue: "{{someValue}}"</label>
<label>someModel: {{someModel}}</label>
<form>
<label>Value</label>
<input type="text" ng-model="someValue"/>
<label>Model</label>
<input type="text" ng-model="someModel.val"/>
</form>
</div>
</body>
</html>
angular.module('prototypal-inheritance-issue', []).
controller('Outer', function($scope){
$scope.someValue = "outerValue";
$scope.someModel = { val: "model value" }
}).
controller('Inner', function($scope){
});
.inner-scope {
background-color: #EEE;
padding: 10px 15px;
}