AngularJS привязывает переменную от службы к контроллеру

Question

Могу ли я привязать только переменную (не объект) от службы к контроллеру?

Для объекта привязки, он работает (с this answer):

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

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; 
}); 

Demo plnkr.

Но мне нужна только одна переменная (не объект со свойствами).

<div ng-controller="myCtrl1"> 
    1st Controller 
    <input type="text" ng-model="variable1"/> 
</div> 
<div ng-controller="myCtrl2"> 
    2nd Controller 
    <input type="text" ng-model="variable2"/> 
</div> 

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; 
}); 

Demo plnkr.

Это не работает. Зачем?

Есть ли хороший способ для этого (без объекта с одним свойством или без $watch)?

Answer 1

Он будет работать, установив переменную области действия на dataService объекта ссылки и ng-model атрибутов в эталонного собственности.

JS

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

app.controller('myCtrl2', function($scope, dataService) { 
    $scope.ds2 = dataService; 
}); 

HTML

<div ng-controller="myCtrl1"> 
    1st Controller 
    <input type="text" ng-model="ds1.variable"/> 
</div> 

<div ng-controller="myCtrl2"> 
    2nd Controller 
    <input type="text" ng-model="ds2.variable"/> 
</div> 

Правило с ng-model всегда включают в себя "точку".

DEMO on PLNKR.

Answer 2

Вы должны использовать объект следующим образом: Demo

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