Angular - Module
Module with controller, filter, and directive.
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<strong>Assiging to an object scope changes rootscope also.</strong>
<br/>
<select class="form-control" ng-change="changeSchema();" ng-model="data.selectedSchema">
<option value="A">Schema A</option>
<option value="B">Schema B</option>
<option value="C">Schema C</option>
<option value="D">Schema D</option>
<option value="E">Schema E</option>
</select>
<br/>
Rootscope Value: {{getOrig()}}
<br/>
</div>
<br/><br/>
<div ng-controller="myCtrl2">
<strong>Direct assignmennt.scope will not change rootscope. </strong><br>
<select class="form-control" ng-change="changeSchema();" ng-model="selectedSchema">
<option value="A">Schema A</option>
<option value="B">Schema B</option>
<option value="C">Schema C</option>
<option value="D">Schema D</option>
<option value="E">Schema E</option>
</select>
<br/>
Rootscope Value: {{getOrig()}}
<br/>
</div>
</div>
JavaScript
angular.module('myApp', [])
.run(function($rootScope) {
})
.controller('myCtrl', function($scope, $rootScope) {
$rootScope.data = {'selectedSchema': 'A'}
$scope.changeSchema = function() {
console.log($scope.data.selectedSchema)
console.log($rootScope.data.selectedSchema)
};
$scope.getOrig = function() {
return $rootScope.data.selectedSchema;
};
})
.controller('myCtrl2', function($scope, $rootScope) {
$rootScope.selectedSchema = 'A';
$scope.changeSchema = function() {
console.log($scope.selectedSchema)
console.log($rootScope.selectedSchema)
};
$scope.getOrig = function() {
return $rootScope.selectedSchema;
};
});