JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="testApp">
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1.data" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1.data" />
</div>
</fieldset>
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;" ng-controller="controller2">
<input type="text" ng-model="Model1.data" />
<input type="text" ng-model="Model2" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1.data" />
</div>
</fieldset>
</div>
JavaScript
var testApp = angular.module('testApp',[]);
var mainApp = angular.module('mainApp',['testApp']);
// using 'value' as a service
testApp.value('myValue', {
data: 'testText'
});
testApp.controller("controller1",['$scope', 'myValue',function($scope, myValue){
$scope.Model1 = myValue;
}]);
testApp.controller("controller2",['$scope', 'myValue',function($scope){
$scope.Model2 = "testText2";
}]);