AngularJS bind variable from service to controller
<p>Can I bind only variable (not object) from service to controller?</p>

<p>For bind object, it works (from <a href="https://stackoverflow.com/a/32510545/2442133">this answer</a>): </p>

<pre><code>&lt;div ng-controller="myCtrl1"&gt;
  1st Controller
  &lt;input type="text" ng-model="model1.prop1"/&gt;
  &lt;input type="text" ng-model="model1.prop2"/&gt;
&lt;/div&gt;
&lt;div ng-controller="myCtrl2"&gt;
  2nd Controller
  &lt;input type="text" ng-model="model2.prop1"/&gt;
  &lt;input type="text" ng-model="model2.prop2"/&gt;
&lt;/div&gt;

app.service('dataService', function() {
  this.model = {
    'prop1': '',
    'prop2': ''
  };
});

app.controller('myCtrl1', function($scope, dataService) {
  $scope.model1 = dataService.model;
});


app.controller('myCtrl2', function($scope, dataService) {
  $scope.model2 = dataService.model;
});
</code></pre>

<p><a href="http://plnkr.co/edit/uqrqCQVZRGQCWNQJnnW7" rel="nofollow noreferrer">Demo plnkr</a>.</p>

<p>But I need only one variable (not object with properties).</p>

<pre><code>&lt;div ng-controller="myCtrl1"&gt;
  1st Controller
  &lt;input type="text" ng-model="variable1"/&gt;
&lt;/div&gt;
&lt;div ng-controller="myCtrl2"&gt;
  2nd Controller
  &lt;input type="text" ng-model="variable2"/&gt;
&lt;/div&gt;

app.service('dataService', function() {
  this.variable = '';
});

app.controller('myCtrl1', function($scope, dataService) {
  $scope.variable1 = dataService.variable;
});


app.controller('myCtrl2', function($scope, dataService) {
  $scope.variable2 = dataService.variable;
});
</code></pre>

<p><a href="http://plnkr.co/edit/V6YbaQkshGSnGl9S7232" rel="nofollow noreferrer">Demo plnkr</a>.</p>

<p>It don't work. Why?</p>

<p>Is there nice way to this (without object with only one property or without <code>$watch</code>)?</p>